Heim > Artikel > Web-Frontend > 水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose
水平居中--行内元素、定宽块、不定宽块_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:511227Durchsuche
声明：来自http://www.imooc.com/learn/9 学习
行内元素如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
定宽块状元素满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
1 margin:0 auto;
不定宽块状元素不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
- 加入 table 标签
- 设置 display;inline 方法
- 设置 position:relative 和 left:50%;
1.HTML代码：
1 <div> 2 <table> 3 <tbody> 4 <tr><td> 5 <ul> 6 <li><a href="#">1</a></li> 7 <li><a href="#">2</a></li> 8 <li><a href="#">3</a></li> 9 </ul>10 </td></tr>11 </tbody>12 </table>13 </div>
CSS代码：
1 table{2 margin:0 auto;3 }4 ul{list-style:none;margin:0;padding:0;}5 li{float:left;display:inline;margin-right:8px;}
2.
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>
这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
3.HTML代码
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下：
<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{ 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>
这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS规范 > 9 视觉格式化模型 Visual Formatting Model_html/css_WEB-ITnoseNächster Artikel：前端设计之CSS布局：上中下三栏自适应高度CSS布局_html/css_WEB-ITnose