在 CSS 中将 div 水平居中 |
您所在的位置:网站首页 › pages如何居中 › 在 CSS 中将 div 水平居中 |
当前位置:主页 > 学无止境 > WEB前端 >
WEB前端
编程语言
网络
算法
操作系统
数据库
在 CSS 中将 div 水平居中
作者:迹忆客
最近更新:2023/03/12
浏览次数:
本文将讨论几种在 CSS 中水平居中 div 的方法。 在 CSS 中使用 margin 属性水平居中 div使用 margin 属性,我们可以在 CSS 中水平居中一个 div。 margin 属性是设置元素所有四个方向的边距的简写。我们可以使用该属性将边距按顺序分配给 top、right、bottom 和 left。 我们可以使用左右边距的 auto 选项来水平居中 div。上边距和下边距可以设置为 0。 auto 选项会将元素放置在中心,然后等分左边距和右边距。我们应该为要居中的元素指定一个宽度。 元素将占据给定的宽度,剩余的水平空间将被左右平均分割。 让我们举个例子。如果元素的宽度为 50%,auto 属性将创建 25% 的左边距和 25% 的右边距。 我们还可以使用 display 属性将元素设置为 table。如果表格中有内容,则无需指定宽度。 使用内容的宽度。当我们没有在内部 div 中写入任何内容时,我们指定一定的宽度。 例如,在 HTML 中创建一个类名为 outerDiv 的 div。然后,在 HTML 中的 outerDiv 中嵌套另一个 innerDiv。 在 CSS 中,在 outerDiv 类中将 width 设置为 100% 并将 background 设置为 blue。接下来,选择 innerDiv 并将 display 属性设置为 table。 将其 background 设置为 red,height 和 width 设置为 10vh 和 10vw。最后,将 margin 设置为 0 auto。 这里,margin 属性中的 0 是顶部和底部的边距。auto 选项用于左右边距。我们可以使用 CSS 的 margin 属性将 div 水平居中。 示例代码: .innerDiv { display: table; background:red; height:10vh; width:10vw; margin: 0 auto; } .outerDiv { width:100%; background:blue; } 在 CSS 中使用 Flexbox 将 div 水平居中我们可以使用 flexbox 属性在 CSS 中水平居中一个 div。 Flexbox 提供了一种将元素垂直和水平居中的简单方法。我们可以创建 flex 并定义元素在 flexbox 中的定位方式。 justify-content 属性可用于在内容未占用所有可用空间时指定内容在弹性框中的水平位置。我们可以在外部容器中创建一个 flexbox,并使用 justify-content 属性将内部容器的位置设置为中心。 例如,选择 innerDiv 类并将 height 和 width 属性设置为 10vh 和 10vw。将颜色黑色设置为背景颜色。接下来,选择 outerDiv 类并将 width 赋予 100%。 将其背景颜色设置为 100%。然后,通过将 display 属性设置为 flex 来创建容器一个 flexbox。之后,将选项 center 写入 justify-content 属性。 因此,我们可以使用 CSS Flexbox 在 CSS 中将 div 水平居中。 示例代码: .innerDiv { background:black; height:10vh; width:10vw; } .outerDiv { width:100%; background:pink; display: flex; justify-content: center; } 在 CSS 中将 div 设置为 inline-block 并使用 text-align 属性水平居中在 CSS 中水平居中 div 的另一种方法是将 div 设置为 inline-block 元素。就像 inline 一样,inline-block 元素不会从新行开始。 但是,我们可以设置 width 和 height。然后,我们可以使用外部 div 中的 text-align 属性将内部 div 水平居中。 内部 div 继承了外部 div 的 text-align 属性,并且元素可以居中。 例如,按照上述方法为内部 div 设置一些高度、宽度和背景。然后,使用 display 属性将元素设置为 inline-block。 在外部 div 中,设置其宽度和背景。最后,将 text-align 属性设置为 center。 这样,我们可以在 CSS 中水平居中一个 div。 示例代码: .innerDiv { background:red; height:10vh; width:10vw; display:inline-block; } .outerDiv { width:100%; background:blue; text-align:center; }上一篇:在 CSS 中调整图像大小 下一篇:在 CSS 中使背景图像变暗 相关文章 使用 CSS 移动文本发布时间:2023/03/13 浏览次数:54 分类:WEB前端 本教程演示如何使用 CSS 移动一段文本。 从 CSS 中的链接中删除蓝色下划线发布时间:2023/03/13 浏览次数:184 分类:WEB前端 本文介绍如何去除 CSS 中链接的蓝色下划线 更改 CSS 中的内容发布时间:2023/03/13 浏览次数:56 分类:WEB前端 本教程介绍如何在 CSS 中更改内容 在 CSS 中如何创建响应式字体发布时间:2023/03/13 浏览次数:170 分类:WEB前端 这篇文章解释了在 CSS 中实现响应式字体的方法 在 CSS 中垂直居中文本发布时间:2023/03/13 浏览次数:161 分类:WEB前端 本文介绍了如何在 CSS 中垂直居中文本 在 CSS 中使用 margin 和 padding发布时间:2023/03/13 浏览次数:51 分类:WEB前端 本教程介绍了在 CSS 中何时使用 margin 和 padding。 在 CSS 中设置背景图像发布时间:2023/03/13 浏览次数:64 分类:WEB前端 本教程介绍如何在 CSS 中设置背景图片 使用内联 CSS 悬停元素发布时间:2023/03/13 浏览次数:187 分类:WEB前端 本教程介绍如何使用内联 CSS 悬停元素。 在 CSS 中垂直对齐文本发布时间:2023/03/13 浏览次数:134 分类:WEB前端 本教程介绍了在 CSS 中垂直对齐文本的方法。 转载请发邮件至 [email protected] 进行申请,经作者同意之后,转载请以链接形式注明出处 本文地址: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |