码迷,mamicode.com
首页 > 其他好文 > 详细

水平居中设置-定宽块状元素

时间:2016-06-04 14:46:42      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素:块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中:

html代码:

<body>
  <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>
</body>

css代码:

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

也可以写成:

margin-left:auto;
margin-right:auto;

注意:元素的“上下 margin” 是可以随意设置的。

水平居中设置-定宽块状元素

标签:

原文地址:http://www.cnblogs.com/Rinpe/p/5558682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!