本文介绍了如何通过CSS实现行内元素和块状元素的水平居中。对于行内元素，可以使用父元素的`text-align: center`属性。对于定宽块状元素，采用`margin: 0 auto`，不定宽块状元素则可以通过table布局、转换为行内元素、浮动定位和弹性盒模型等方式实现水平居中。
我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别
三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。
在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？
行内元素的水平居中设置
行内元素的水平居中有一个通用的方法：通过在其父元素中设置text-align:center来实现：
我们给出一个html文件，写入一个div块状元素，包裹一个span内联元素：
<!DOCTYPE html>
<html>
<head>
<title>前端试题</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
<div>
<span>这是一个行内元素</span>
</div>
</body>
</html>
父元素div的css样式当中，用text-align: center;对span元素进行“水平居中”设置。
为了突出显示父元素div和子元素span之间的位置关系，设置一下背景颜色：
div{
width: 200px;
height: 100px;
background-color: yellow;
text-align: center;
}
span{
background-color: orange;
最低0.47元/天 解锁文章
扫一扫
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
