HTML中如何让控件居中

来源：互联网发布：电视直播软件看不了编辑：程序博客网时间：2024/05/10 09:41

接触前段时间不长，尝试通过控件本身用css让控件居中，但是失败了，上网查找资料，找到了思路，对该控件设置父标签，然后设置居中的属性

方法1设置center父标签，测试后发现此方法只能让控件横向居中：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>菜鸟教程(runoob.com)</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.com)</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>

阅读全文

0 0