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

最新推荐文章于 2021-06-25 17:17:30 发布

技术与健康

最新推荐文章于 2021-06-25 17:17:30 发布

阅读量668

点赞数

分类专栏： CSS

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。

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

html代码：

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

css代码：

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

</style>

也可以写成：

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

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

技术与健康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平居中设置-定宽块状元素

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：html代码：我是定宽块状元素，哈哈，我要水平居中显示。
复制链接

扫一扫