为什么span元素会居中

Question

<div class="denglu">
    <input class="box" type="submit" value="登陆"/>
    <span>下次自动登陆</span>
</div>



css

.box{
  width: 60px;
  height: 45px;
  font-size: 14px;
  color: #fff;
  background: orange;
  border: 0;
}

这段代码为什么span会居中？解决方法我知道可以vertical垂直，和浮动。。

Answer 1

这个应该有vertical-align的默认值 baseline

Answer 2

这个是浏览器差异问题，现在标准化浏览器（如chrome）会默认自动垂直居中文字
但是在IE6下的表现，却是这样的：

所以为了保证浏览器的统一性，你需要初始化通用样式放入到项目中，如下：

/*
 * 1. 去除IE6/7, FF3+, S5, Chrome默认的margin
 * 2. 在不同浏览器，label与input(特别是checkbox和radio)总是不能对齐，这里统一了各个浏览器的表现
 * 3. 解决IE6/7不能继承字体样式
 */
input,button,textarea,select,label {
    margin:0;  /*1*/
    vertical-align:middle;  /*2*/
    font-size:100%;  /*3*/
    font-family: inherit; /*3*/
}

PS. 代码中（2）vertical-align:middle;解决了IE6下不居中的问题；如有帮助望采纳~