<分区>
<分区>
我正在疯狂地尝试，但我无法让这个表格(我用 flex 构建)中的文本居中。所有内容都应垂直居中。有什么想法可以实现吗？非常感谢任何形式的帮助。我现在试了几个小时。
非常感谢!
.wrapper {
display: flex;
flex-wrap: nowrap;
text-align: center;
background-color: silver;
border-top: 2px solid #000;
}
.wrapper>div {
height: 250px;
}
.ct-title {
flex: 1 40%;
background: deepskyblue;
text-align: left;
}
.ct-content-1 {
flex: 1 20%;
background: gold;
}
.ct-content-2 {
flex: 1 20%;
background: hotpink;
border-left: 4px solid #000;
border-right: 4px solid #000;
}
.ct-content-3 {
flex: 1 20%;
background: lime;
}<div class="wrapper">
<div class="ct-title">Title
<p>This is some text in a paragraph.</p>
</div>
<div class="ct-content-1">6</div>
<div class="ct-content-2">8</div>
<div class="ct-content-3">12</div>
</div>最佳答案
试试这个。您还需要对 child 应用 flex。
.wrapper {
display: flex;
flex-wrap: nowrap;
text-align: center;
background-color: silver;
border-top: 2px solid #000;
}
.wrapper>div {
height: 250px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.ct-title {
flex: 1 40%;
background: deepskyblue;
text-align: left;
}
.ct-content-1 {
flex: 1 20%;
background: gold;
}
.ct-content-2 {
flex: 1 20%;
background: hotpink;
border-left: 4px solid #000;
border-right: 4px solid #000;
}
.ct-content-3 {
flex: 1 20%;
background: lime;
}<div class="wrapper">
<div class="ct-title">Title
<p>This is some text in a paragraph.</p>
</div>
<div class="ct-content-1">6</div>
<div class="ct-content-2">8</div>
<div class="ct-content-3">12</div>
</div>关于html - 我怎样才能将 flex 元素的内容居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50228481/