迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

如何实现元素的垂直居中

发布时间: 2016-03-14 作者: 嫣然 浏览次数:

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

一、利用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"    // 垂直

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

赞助
迹忆博客

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: