我需要基于此 HTML 和 CSS 代码将div
内部水平居中于外部内部:
<div class="externo">
<div class="interno">
</div>
</div>
.interno {
background-color: green;
height: 20px;
width: 50%;
}
.externo {
background-color: red;
width: 200px;
padding: 20px;
}
JSFiddle:https ://jsfiddle.net/fpvkcrkg/
使用自动边距。
您实际上只需要将它们放在它们的值
margin-left
和margin-right
方式与执行以下操作相同:即,上和下等于零。
使用CSS使元素居中的方法有很多,但去年最流行的一种方法是使用Flexbox。
使用 Flexbox,容器不需要在空间中放置任何特定属性,但是使用子组件的 Flexbox 属性,您可以做传统 CSS 无法想象的事情。
要了解有关 Flexbox 的更多信息,我建议您访问以下链接:
如果您正在寻找不包含 Flexbox 的解决方案,那么我建议您查看CSS 中的居中:完整指南。这是关于如何使用 CSS 使元素居中的绝对指南,无论您需要支持哪种浏览器。
margin:0 auto;
在 CSS中的类中添加一个以interno
实现在外部 div 内水平居中您可以将此 CSS 应用于
div
内部:当然,您不必将宽度设置为 50%。任何小于
div
父级的宽度都可以。他margin: 0 auto
就是以自我为中心的人。如果你想包含 IE8+,最好改用这个:
它将使内部元素水平居中,并且无需指定特定宽度即可工作。
字体
jsfiddle
您可以在外部使用flexbox
div
。通过简单地添加最后一行,它相对于其父级居中。
另一种方法是使用变换: translateX
将外部 div 设置为 position
relative
,absolute
或者fixed
它应该定义尺寸。在内部 div
position: absolute
和left: 50%
中,然后应用transform: translateX(-50%)
.测试:
注意:结合 translateY 会在两个轴上产生居中。您必须添加到内部 div
top: 50%
。只需添加
display: inline-block
到<div>
内部并通过添加text-align: center
到<div>
外部将其居中。它看起来像这样:
最快的方法是在该部分代码中包含标签,无需 CSS 或 Flex-Bos 或 Na De Na……就这么简单:
最快的方法是在该部分代码中包含标签,无需 CSS 或 Flex-Bos 或 Na De Na……就这么简单: