位置：广州松河 > 技术支持 > text-align:center与display:inline组合块居中，多个行内元素/块状元素居中方法_CSS学习

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

来源：网络整理时间：2023/3/4 0:56:38 共 3629 浏览

：改变块级元素的 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，变成了行内元素，所以少了一些功能，比如设定长度值。

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：float:left与position:relative，left:50%+left:-50%组合居中方法_CSS学习 | ·下一条：text-align:center与margin:0 auto居中区别_CSS学习