使用flexbox父级在绝对定位的div中垂直居中，右对齐，多行文本 [英] Vertically center, right align, multi-line text in absolutely positioned div with flexbox parent
问题描述
我有一些绝对定位的div，其中包含两行文本，即h2和p.我正在尝试使文本成为:在绝对定位的div中垂直居中，右对齐，并且h2和p标签之间有换行符.
I have a some absolutely positioned divs with two lines of text, an h2 and a p. I'm trying to get the text to be: centered vertically within the absolutely positioned div, right aligned, and there be a linebreak between the h2 and p tag.
绝对定位的div包含在父对象中，因此我认为我可以使用flexbox解决此问题，但事实证明，这比预期的要难.我给了父级display:flex和align-items:center将其垂直居中.但是然后我的h2和p在同一行，没有换行符.
The absolutely positioned divs are contained within a parent so I thought I could use flexbox to solve this problem, but turns out it's harder than expected. I've given the parent display:flex and align-items:center which vertically centers them. But then my h2 and p are on the same line, there's no linebreak.
因此，我然后使用了flex-direction:列，该列创建了换行符，但是文本不再垂直居中.如果我使用align-items:flex-end和flex-direction:column，则文本将右对齐，并且在h2和p之间会有换行符，但它们不会垂直居中.
So then I used flex-direction: column which created a linebreak, but then the text is no longer centered vertically. If I use align-items:flex-end and flex-direction:column the text will be right aligned and there will be a linebreak between the h2 and p, but then they are not centered vertically.
margin-right:auto可以使项目右对齐，但是与align-items:center和flex-direction:column结合使用时，它不起作用. float:right也不起作用.
margin-right:auto can supposedly right align items, but combined with align-items:center and flex-direction:column, it doesn't work. float:right also doesn't work.
我的标记如下:
<div class = "col-sm-12">
<div class = "row overlay-container">
<img src = "_img/top-right@4x.png" class = "img-responsive grid-image" alt = "top-right@4x image" />
<div class = "overlay overlay-2">
<h2>Recent Work</h2>
<p>Lorem ipsum dolor</p>
</div> <!-- /overlay -->
</div> <!-- /row -->
</div> <!-- /top right -->
其中overlay是overlay-container内部的绝对定位的div.叠加层是位于图像一部分上方的框.上面提到的display:flex和其他属性在overlay类上.
where overlay is the absolutely positioned div inside the overlay-container. The overlay is a box positioned over a portion of the image. The display:flex and other properties mentioned above are on the overlay class.
看来，无论我如何尝试，我只能从三个条件中选出两个来工作.使用flexbox不是必需的，但我认为这样可以使垂直居中放置文本变得容易.有人可以帮忙吗?
It seems that no matter what I try, I can only get two out of the three conditions to work. Using flexbox is not a requirement, but I thought it would make it easy to vertically center the text. Can anyone help?
推荐答案
以下是使用display: flex
堆栈片段
body {
margin: 0;
}
.overlay {
width: 300px;
margin-top: 5vh;
height: 90vh;
border: 1px solid;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class = "overlay overlay-2">
<h2>Recent Work</h2>
<p>Lorem ipsum dolor</p>
</div> <!-- /overlay -->
已更新
在某些情况下，可能需要使用自动边距代替，因为以justify-content为中心(使用flex-direction: column时)的默认行为是，当内容不合适时，它会在顶部和底部同时溢出.
In some situations one might need to use auto margin's instead, as the default behavior when centering with justify-content (when using flex-direction: column) is, when content doesn't fit, it will overflow at both top and bottom.
堆栈片段
body {
margin: 0;
}
.overlay {
width: 300px;
margin-top: 5vh;
height: 90vh;
border: 1px solid;
display: flex;
flex-direction: column;
/*justify-content: center; removed */
align-items: center;
overflow: auto; /* scroll when overflowed */
}
.overlay h2 {
margin-top: auto; /* push to the bottom */
}
.overlay p {
margin-bottom: auto; /* push to the top */
}
<div class = "overlay overlay-2">
<h2>Recent Work</h2>
<p>Lorem ipsum dolor</p>
</div> <!-- /overlay -->
已更新2
此处中间有第三个项目，不合适时会滚动.
Here with a 3rd item in the middle, what will scroll when not fit.
堆栈片段
body {
margin: 0;
}
.overlay {
width: 300px;
margin-top: 5vh;
height: 90vh;
border: 1px solid;
display: flex;
flex-direction: column;
align-items: center;
}
.overlay p:first-of-type {
overflow: auto; /* scroll when overflowed */
}
.overlay h2 {
margin-top: auto; /* push to the bottom */
}
.overlay p:last-of-type {
margin-bottom: auto; /* push to the top */
}
<div class = "overlay overlay-2">
<h2>Recent Work</h2>
<p>
Lorem ipsum dolor<br>
Lorem ipsum dolor<br>
Lorem ipsum dolor<br>
Lorem ipsum dolor<br>
Lorem ipsum dolor<br>
Lorem ipsum dolor<br>
Lorem ipsum dolor<br>
</p>
<p>Maybe a link for more</p>
</div> <!-- /overlay -->
另一个示例:
这篇关于使用flexbox父级在绝对定位的div中垂直居中，右对齐，多行文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
