<分区>
html - 3个div在一个容器中
首先我得说，我没有找到任何答案。如果重复，请原谅我并指出我的正确之处。
我正在尝试创建一个内部包含三个 div 的 div。中心 div 应该有文本，侧面 div 应该有一条垂直居中的线，如下所示:
这是我目前的代码:
HTML:
<div className="container">
<div class="line"><hr/></div>
<div class="text">My Text</div>
<div class="line"><hr/></div>
</div>
CSS:
.container {
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
display: inline-block;
}
.line {
display: inline-block;
}
}
我的问题是我根本看不到线条，我的文本位于左侧。我尝试了 margin: auto; 但这对我没有帮助。有人可以帮忙吗？
我有一个先决条件，我不能使用 flexboxes。
最佳答案
您可以使用 pseudoelements 而不是 hr 来实现此布局。
例子:
.container {
text-align: center;
position: relative;
}
.container:before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: grey;
top: 50%;
transform: translateY(-50%);
}
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
margin: 0 auto;
display: inline-block;
background: white;
position: relative;
/* add left and right padding if needed */
padding: 0 1em;
}<div class="container">
<div class="text">My Text</div>
</div>关于html - 3个div在一个容器中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47078118/