text-align:center与display:inline组合块居中,多个行内元素/块状元素居中方法

老白 3年前 768浏览 0评论

 行内元素块状元素居中方法.png text-align:center与display:inline组合块居中,多个行内元素/块状元素居中方法 CSS学习

:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。如下例子:

html代码:

<body> <div>     <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; } /* margin:0;padding:0(消除文本与div边框之间的间隙)*/ 
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline; } /* margin-right:8px(设置li文本之间的间隔)*/ 
.container li{
    margin-right:8px;
    display:inline; } </style>

这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

 

发表评论