vertical-align

为什么有时候vertical-align属性不起作用？

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用.

.op h1,.op span{width:400px;height:140px;color:#fff;background:#000; font-size: 20px; font-weight: bold;}/*定义元素公用样式*/
.op h1{vertical-align:middle;}
.op span{display:table-cell; vertical-align:middle;}
<div class="op">
<h1>未设置元素属性：display:table-cell;</h1>
<span>设置元素属性：display:table-cell;</span>
</div>

效果预览

vertical-align:-2px可以调整元素位置。

例子

*{ margin: 0; padding: 0;}
li{ list-style: none;}
.list{ width: 300px; height: 500px; margin: 0 auto; padding: 10px; border:1px solid #000;}
.list li{ width: 100%;  height:90px; line-height: 90px;font-size:16px; background: #eee; margin-top: 5px; padding-left: 6px;}
.list li span{ display: inline-block; width: 48px; height: 48px; margin-right: 6px; background: url("./images/20.png") center no-repeat; vertical-align: middle; }

<div class="list">
<ul>
<li><span></span>非置换元素</li>
<li><span></span>非置换元素</li>
<li><span></span>非置换元素</li>
<li><span></span>非置换元素</li>
</ul>
</div>