迹忆客 专注技术分享

最近在写项目时,遇到图片和文字垂直居中的问题,所以总结了一下,分享给大家

一、利用vertical-align:middle实现垂直居中

(1).图片和文字垂直居中

类似：

代码：

      <div class="box">
           <img src="images/1.png" height="71" width="236" alt="" />
           <p>文字文字文字文字文字文字</p>
      </div>

CSS样式：

      <style>
      .box{width:500px;}
      .box img{display:inline-block;vertical-align: middle;}
      .box p{display:inline-block;vertical-align: middle;}
      </style>

（2）.图片元素在一个盒子中垂直居中

类似：

其实只有一个图片在父盒子中垂直居中上面的方法也能实现，这里简单说一下，给图片的父盒子再添加一个空span子元素，然后span的样式：

span{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}

在这里主要说一种更简单的方法：

div{ display: table-cell; //此元素会作为一个表格单元格显示（类似 <td> 和 <th>)
      vertical-align:middle; //垂直居中
      text-align:center;} //水平居中

子元素图片不用设置任何属性

二：利用定位实现元素的垂直居中

结构：

<div class=”.box”>
       <img src="images/1.png" height="71" width="100" alt="" />
</div>

CSS样式：

.box{width:200px;height:200px;position: relative;border:1px solid #ddd;} img{position: absolute;left:50px;top:50px;}

这个方法的缺点：需要知道父盒子和图片的宽度和高度，若不知道width和height还可以用javascript获取，然后用js使图片垂直水平居中

($(“.box”).width()-$("img").width())/2+"px"       //   水平  
($(“.box”).height()-$("img").height())/2+"px"    // 垂直

以上只是个人在工作中总结的小经验，如有问题或更好的方法，欢迎大家给我留言。