- 水平居中设置
- 行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。(父元素和子元素：如下面的html代码中，div是“some text”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html
<body>
<div class="txtCenter">some text</div>
</body>
css
<style>
.txtCenter{
text-align:center;
}
</style>
- 块级元素
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
- 定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div
- 定宽块状元素
- 行内元素
<body>
<div>some text</div>
</body> <stlye>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
2809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
