CSS水平居中的几种方法
2016-01-27 18:06
543 查看
行内元素水平居中
如果被设置元素为文本、图片等行内元素时,水平居中可以通过父元素设置text-align:center来实现。
html代码:
<body> <div style="text-align:center">我是文本,哈哈,我想要在父容器中水平居中显示。</div> </body>
当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。
定宽块元素水平居中
定宽块状元素可以通过设置“左右margin”值为“auto”来实现居中。html代码:
<body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body>
css代码:
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
不定宽块元素水平居中
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。使用table标签居中
为需要设置的居中的元素外面加入一个 table 标签 ( 包括<tbody>、<tr>、<td>)。
为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
html代码:
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div>
css代码:
<style> table{ margin:0 auto; } ul{list-style:none;margin:0;padding:0;} li{float:left;display:inline;margin-right:8px;} </style>
设置 display:inline 方法
改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
html代码:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ text-align:center; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style>
设置 position:relative 和 left:50%;
通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。
html代码:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
csss代码:
<style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>
相关文章推荐
- CSS 实践:实现下拉菜单的方法
- 定制滚动条样式 webkit
- 第 9 章 单位和值
- 第 8 章 CSS 代码缩写,占用更少的带宽
- 第 7 章 CSS 布局模型
- css漂亮表格样式
- css3动画总结
- CSS icon图标之纯CSS实现带动画效果的天气图标
- CSS 弹性盒
- 第 6 章 CSS 盒模型
- 在execCommand formatBlock 'p'标签里增加class或id或css style?
- js控制CSS样式属性语法对照表
- css与html的常用的元素分类
- html+css学习笔记:Sass语法学习
- CSS3+Sprite实现僵尸行走动画特效源码
- js+css绘制颜色动态变化的圈中圈效果
- 自定义复选框 checkbox 样式
- css盒模型和块级、行内元素深入理解
- css 块状元素和内联元素
- CSS实现强制换行-------Day 78