北大青鸟课工场
北大青鸟课工场 全国统一咨询热线:400-8869355
 首页  »    资讯   »    内容

CSS处理水平居中问题

    课工场胡老师     2017-03-23     4398浏览

css处理水平居中问题,水平居中设置-行内元素、定宽块状元素、不定宽块状元素


1、水平居中设置-行内元素

  通过父元素设置 1 text-align:center; ,让父元素的内容居中


2、水平居中设置-定宽块状元素

块状元素的宽度width为固定值,通过设置“左右margin”值为“auto”来实现居中的

例子:

01<!DOCTYPE HTML>

02 

03<html>

04 

05<head>

06 

07<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

08 

09<title>定宽块状元素水平居中</title>

10 

11<style>

12 

13div{

14 

15    width: 200px;/*固定的宽度*/

16 

17    margin: 20px auto;/*左右margin设置为auto*/

18 

19    border: 1px solid red;

20 

21}

22 

23</style>

24 

25</head>

26 

27<body>

28 

29<div>我是定宽块状元素,我要水平居中显示。</div>

30 

31</body>

32 

33</html>


3、水平居中设置-不定宽块状元素

 方法1. 加入 table 标签

01<!DOCTYPE HTML>

02<html>

03<head>

04<meta charset="utf-8">

05<title>不定宽块状元素水平居中</title>

06<style>

07table{

08    margin:0 auto;

09}

10/*下面是任务区代码*/

11.wrap{

12    background:#ccc;

13}

14</style>

15</head>

16<body>

17<table>

18  <tbody>

19    <tr><td>

20        <div class="wrap">

21            我要水平居中 

22        </div>

23    </td></tr>

24  </tbody>

25</table>

26 

27</body>

28</html>

  方法2. 设置 display:inline; 方法,与第一种类似,显示类型设为行内元素,进行不定宽元素的属性设置

01<!DOCTYPE HTML>

02<html>

03<head>

04<meta charset="utf-8">

05<title>不定宽块状元素水平居中</title>

06<style>

07.container{text-align:center;}

08.container ul{list-style:none;margin:0;padding:0;display:inline;}

09.container li{margin-right:8px;display:inline;}

10</style>

11</head>

12 

13<body>

14<div class="container">

15    <ul>

16        <li><a href="#">1</a></li>

17        <li><a href="#">2</a></li>

18        <li><a href="#">3</a></li>

19    </ul>

20</div>

21</body>

22</html>

  

方法3. 设置 position:relative 和 left:50% 利用相对定位的方式,将元素向左偏移 50% ,即达到居中的目的

01<!DOCTYPE HTML>

02<html>

03<head>

04<meta charset="utf-8">

05<title>不定宽块状元素水平居中</title>

06<style>

07/*下面是代码任务区*/

08.wrap{

09    clear:both;

10    float:left;

11    position:relative;

12    left:50%

13    }

14.wrap-center{

15    background:#ccc;

16    position:relative;

17    left:-50%;

18}

19</style>

20</head>

21 

22<body>

23<!--下面是代码任务区-->

24<div class="wrap">

25    <div class="wrap-center">我们来<a href="http://www.html5cn.org/portal.php?mod=list&catid=13" target="_blank" class="relatedlink">学习</a>一下这种方法。</div>

26</div>

27</body>

28</html>

原文链接:http://www.cnblogs.com/it-xiaojun/p/5838374.html?utm_source=tuicool&utm_medium=referral

来源作者:ITxiaojun



我要分享:

 相关阅读

咨询专栏

学费低到不能说,薪资高到没朋友!你离高薪只差一个电话的距离。
QQ群:263965166
电话:400-8869355

咨询在线老师
课工场报名 预约免费试听