前端基础知识学习——属性vertical-align

vertical-align

用于设置一个元素的垂直对齐方式，只针对行内元素或行内块元素

属性值	描述
baseline	和基线对齐
top	顶部对齐
niddle	居中对齐
bottom	底部对齐

对齐元素

span2想要与span1顶部、中部、底部对齐时，需要给内部元素都加相同 vertical-align

<style>       
        .box1 {height:200px;border:10px solid #000;text-align:center;}
        .span1 {
            width: 100px;
            height: 200px;
            background: red;
            display: inline-block;
            vertical-align: middle;
        }
        .span2 {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            vertical-align:middle;
        } 
    </style>
 <div class="box1">
        <span class="span1"></span>
        <span class="span2"></span>
    </div>

图示

去除图片、li底部间隙

图片或者表单等行内块元素，它的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
给img 、li设置vertical:center|top|bottom等等。只要不要让img用默认的基线对齐(baseline)即可。

 <style>    
        .box2{border:10px black;background-color:aqua;}
        .img{vertical-align:top;}
    </style>
 <div class="box2">
        <img class="img" src="37.png" alt="Alternate Text" />
        <img class="img" src="37.png" alt="Alternate Text" />
    </div>

图示

  <style>
        /*
        在IE6、7下li下几个px间隙问题：在IE6、7下li本身没有浮动，但是内容浮动li下就会多出几个px
            解决办法：给li加vertical-align:top;
        */
        ul {margin:0;padding:0;list-style:none;        }
        a {text-decoration:none;   float:left;     }
        .list {width:300px;        }
            .list li {
                height: 30px;
                border: 1px solid #000;
                vertical-align: top;
            }
        span{float:right}
    </style>
     <ul class="list">
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
        <li>
            <a href="#">大余杭塘</a>
            <span>作者</span>
        </li>
    </ul>