接触前段时间不长,尝试通过控件本身用css让控件居中,但是失败了,上网查找资料,找到了思路,对该控件设置父标签,然后设置居中的属性
方法1设置center父标签,测试后发现此方法只能让控件横向居中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
#i1 {
text-align: center;
color: #0c040a;
background-color: #9933cc;
font-size:larger;
width: 100px;
height: 50px;
}
</style>
<script>
function objectTest() {
var person = new Object();
person.firstname = "John";
person.lastname = "Doe";
person.age = 50;
person.eyecolor = "blue";
// document.write(person.firstname + " is " + person.age + " years old.");
var s = person.firstname + " is " + person.age + " years old.";
return alert(s);
;
}
</script>
</head>
<body>
//设置center父标签
<center>
<input id="i1" type="submit" onclick="return objectTest()" value="提交">
</center>
</body>
</html>
方法1设置div父标签,再设置样式align=”center”,测试此方法可以实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
#i1 {
text-align: center;
color: #0c040a;
background-color: #9933cc;
font-size:larger;
width: 100px;
height: 50px;
}
</style>
<script>
function objectTest() {
var person = new Object();
person.firstname = "John";
person.lastname = "Doe";
person.age = 50;
person.eyecolor = "blue";
// document.write(person.firstname + " is " + person.age + " years old.");
var s = person.firstname + " is " + person.age + " years old.";
return alert(s);
;
}
</script>
</head>
<body>
<div align="center">
<input id="i1" type="submit" onclick="return objectTest()" value="提交">
</div>
</body>
</html>
更多推荐
HTML中如何让控件居中
发布评论