接触前段时间不长，尝试通过控件本身用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中如何让控件居中