我需要定位两个段落,以便它们满足以下条件:
即使两个段落中的一个或两个占用多于一行,两个段落也必须在其容器中居中居中。这实际上与段落重叠。
段落容器必须在页面上居中,并且最大宽度小于页面宽度的100%。
如果调整页面大小或更改段落内容,则这些条件必须保持为true。
我知道有很多要跟踪的地方,因此我做了一个JSFiddle来解释和演示所需的内容。
有趣的是,JSFiddle似乎正确居中,但是仅当文本占用多于一行时才...
StackOverflow不允许我发布没有代码的问题,因此这里有一些代码:
<div id="container">
<p id="p1"></p>
<p id="p2"></p>
</div>
注意:我在标题中说“外部DOM流”的原因是,至少第二段必须在DOM流之外,否则它不能位于第一段的顶部。
最佳答案
您可以通过css flex属性执行此操作
#container {
display: flex; /* equal height of the children */
}
#container > p {
flex: 1; /* additionally, equal width */
text-align:center;
padding: 1em;
border: solid;
background-color:#ff0000
}
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam</p>
</div>