使用这段代码:
.row {
display: flex;
text-align: center;
}
.col {
flex: 1;
}
<div class='row'>
<div class='col'>
<h1>Left</h1>
<h2>Some longer text</h2>
</div>
<div class='col'>
<h1>Right</h1>
<h2>Some longer text</h2>
</div>
</div>
我得到这样的输出
------------------------------------------------------------------
| Left | Right |
| Some longer text | Some longer text |
------------------------------------------------------------------
(虚线表示容器)。
我想要的是让每一列中的元素相对于彼此保持居中,但偏向于列分隔符,并带有一些填充,例如
------------------------------------------------------------------
| Left | Right |
| Some longer text | Some longer text |
------------------------------------------------------------------
我怎样才能做到这一点?
最佳答案
请查收附件fiddle
您可以使用 align-items: center 进行垂直居中对齐或然后进行水平对齐,在特定元素上使用 align-self 以 flex-start、flex-end 或 center。
只需在此处添加 css 代码。
.row {
display: flex;
margin: 0 -15px;
}
.col {
flex: 1;
flex-flow: column wrap;
align-items: center;
display: flex;
padding: 0 15px;
}
.col:first-child h1,
.col:first-child h2{
align-self: flex-end;
}
.col:last-child h1,
.col:last-child h2{
align-self: flex-start;
}
关于html - 两列 flex 布局,内容向中间对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58090471/