关于input属性的居中问题

在学习了一些简单的前端基本知识之后开始手动尝试用源码结合php写一个简单的登陆界面，打算稍微美化一下

在使用input标签的时候碰到问题发现不知道怎么居中，尝试margin无效

于是想了一个本办法：

在input标签的外面又套了一个div，尝试给这个div命名并且给上宽度再使用margin水平居中，但是最后的结果是input标签的居中属性并没有对等

也就是说这样的居中方式跟上面的“登陆”字体的居中是不对等，倾斜的，所以开始思考问题所在

得出的结论是input标签属于行内标签，使用块标签的居中方法是不正确的。而margin的水平居中方法是针对块状标签的

解决方法：

我们要先把input标签转换为块状标签，即：display:block;

然后再使用margin的方法进行居中，margin:0 auto;

但是这样的方法会使原本的属性改变，可能会有追加的padding或者margin，具体怎么样我还没有研究

暂时我只是调整本身的padding和margin的值来达到想要的效果，具体情况打算以后空下来再做研究。

关于input属性的居中问题相关推荐

html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
当 input 属性为 number，设置maxlength属性不生效的坑
当 input 属性为 number,设置maxlength属性不生效的坑一.现象 1. <input type="text" maxlength="11&quo ...
学生档案复习前面HTML5新增标签/属性/input属性
根据所学HTML5新增的标签.属性.input属性,把学生的姓名.手机.邮箱.职业.出生日期.成绩写出来代码如下: <!DOCTYPE html> <html lang=" ...
HTML的input属性
HTML的input属性之前我收集发表了表单元素和元素input的type值:这里主要讲解一下input的属性value值有哪些:其实也是超多. 其书写格式为:value="值" ...
前端input属性判断字段不能为空
input属性前言前端input属性required 前端input pattern属性前言前端判断字段我自己一般使用js判断,而input自带一些属性,可以直接进行判断例如required属 ...
HTML Input 属性
value 属性 value 属性规定输入字段的初始值: 实例 <form action="">First name:<br> <input type ...
input属性disabled和readonly的区别
两种属性的写法如下: 1.<input type="text" name="name" value="xxx" disabled=&q ...
html5新增的一个input属性
Form属性这个属性比较给力以前写表单提交,为了能提交,顾不上页面排版,都写一个form里面去今天看css3教程的时候,顺带看到这个属性,感觉很给力啊只要给input加一个form属性,值等于 ...
html里的input属性,HTML中强大的input标签属性
用了许久的html,这个标签是最常用的标签之一. 标签中type属性是必不可少的,以往我最常用的有 type="text"(单行文本输入) 类型. type="butto ...

关于input属性的居中问题

关于input属性的居中问题相关推荐

最新文章

热门文章