码迷,mamicode.com
首页 > 其他好文 > 详细

div如何居中

时间:2015-08-09 00:24:56      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:

  整理一点关于div居中的方法。哪里有不妥欢迎大家拍砖~

  

  • div里的内容如何居中:

  水平居中(非块级元素): text-align:center; 

  垂直居中:

  1.  vertical-align:middle; 

  2. 内容是文字的话,可以将height和line-height设置成一样的值;

  简单方法(但不是全部兼容):

      
1 display: -webkit-flex;
2 display: flex;
3 -webkit-align-items: center;
4 align-items: center;
5 -webkit-justify-content: center;
6 justify-content: center;
 

 

  • 整个div如何居中:

  定宽div水平居中: margin: 0 auto;  0表示上下边距是0,auto表示margin-left和margiin-top为auto;

  不定宽div水平居中:

  1. 第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
  2. display:inline; text-align:center; 

  3. 通过给父元素设置 float,然后给父元素设置 position:relative; left:50%; ,子元素设置  position:relative; left:-50%; 
     div水平居中:父div设置 width:100%; 

div如何居中

标签:

原文地址:http://www.cnblogs.com/littleaway/p/4707434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!