vertical-align 的使用

之前老是想要一些元素垂直居中对齐，常常用line-height，但是对于图片来讲，line-height的表现并不理想，因此得用vertical-align:middle，如下是其用法：

做用环境：父元素设置line-height。

做用对象：子元素中的inline-block和inline元素。

1、当父元素设置了line-height

• 父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起做用
  
• vertical-align不可继承，必须对子元素单独设置

关于定义——

在父元素定义了line-height的条件下，vertical-align的做用是让（inline/inline-block）子元素依据父元素的基点对齐

数值详解：

 1. 首先关于数值，见下面的示例：

.test{vertical-align:-2px;}
复制代码

元素相对于基线向下偏移两像素，这个经常用来修复单选框/复选框与12像素文字大小不对齐的问题。

 2. 再者关于百分数值，这里的vertical-align，是相对于此标签继承的line-height值决定的。例如，以下示例代码：

.test{vertical-align:-10%;} 
复制代码

假设这里的.test的标签继承的行高是20px，则这里的所表明的实际值是：-10%*20px=-2px。 IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。

。。。

关于做用环境——

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

• 所谓inline-block水平的元素，便可以与inline水平元素混排，又能设置高宽属性的元素，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认状况下会对vertical-align属性起做用。
• 对inline元素设置vertical-align是有做用的，只是要从新设置line-height的值，不然继承了父元素的line-height只能垂直居中
  

inline元素做为父元素能够不设置line-height，字体会撑起一个适合子元素做用的高度。  小白点能够各类对齐

<span class="box">  <span class="dot">  </span> 我是一段卡哇伊的文字</span>
.box{background:black; color:white; padding-left:20px;} 
.dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}
复制代码

div父元素必须设置line-height，不然对其设置vertical-align无效，图片不会在绿色框里动

<div class="outerbox">
<img src="C:\Users\Administrator\Desktop\test.jpg"/>
<span>这是外层元素的内部文字</span>
</div>
.outerbox{width:300px; line-height: 300px;font-size: 16px; }
.outerbox img{width: 30px; height:30px; vertical-align: bottom;}
.outerbox span{vertical-align: top;}
复制代码

对文字设置vertical-align:top 无效是由于文字继承了父元素的line-height，致使文字居中，要想vertical-align起做用，可在该元素上设置line-height小一些覆盖父元素

2、当父元素没有设置line-height时，inline/inline-block子元素之间对齐

• 当父元素没有设置line-height时，只对行内元素的兄弟元素对齐有用，没法子元素居中对齐父元素。
• 设置了vertical-align:middle的子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项，则居中对齐

例：黄色的线为图片中垂线

<div style="height:200px">
<img src="gallery4.jpg" style="width:50px;vertical-align:middle;">
<span style="vertical-align:middle">hahahahhah</span>
</div>
复制代码

只设文字的vertical-align，则文字的中线对齐图片底线

只设图片的vertical-align，则图片的中线与文字的基线对齐

两个的vertical-align都为middle，则两个的中线互相对齐

文章只为保存记录方便查询问题

原文连接：blog.csdn.net/diudiu5201/…