Question

我需要定位两个段落才能满足这些条件：

两个段落必须在其容器中居中于相同高度，即使其中一个或两个占据多个行。这有效地重叠了段落。
段落容器必须位于页面的中心位置，最大宽度小于页面宽度的100％。
如果页面调整大小或段落内容发生变化，则这些条件必须保持为真。

我知道要记住很多，所以我做了一个JSFiddle来解释和展示所需要的东西。

有趣的是，JSFiddle似乎正确地居中，但只有当文本占用多行时......

StackOverflow不允许我在没有代码的情况下发布问题，所以这里有一些代码：

<div id="container">
  <p id="p1"></p>
  <p id="p2"></p>
</div>

注意：我在标题中说“外部DOM流”的原因是因为至少第二段需要在DOM流之外，否则它不能位于第一段之上段落。

Answer 1

您可以通过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>

Answer 2

试试这个：

function randomNumber(low, high) {return Math.floor(Math.random() * high) + low;}

function generateSentence(length) {
	var sentence = "";
  var count = 0;
  var wordLength = randomNumber(1, 10);
  for (i = 0;i < length;i++){
    if (count == wordLength) {
    	sentence += " ";
      wordLength = randomNumber(1, 10);
      count = 0;
    } else {
    	sentence += "a";
    	count++;
    }
  }
  return sentence
}

var tracker = 1;
setInterval(function(){
	var randomLength = randomNumber(10, 150);
  if (tracker == 1){
  	document.getElementById('p1').innerHTML = generateSentence(randomLength);
    tracker = 2;
  } else {
  	document.getElementById('p2').innerHTML = generateSentence(randomLength);
    tracker = 1;
  }
}, 1000)

#container{
  position: absolute;
  width: 50%;
  left: 25%;
  min-height: 100px;
  background-color: red;
  text-align: center;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
}
#container p {
  margin:0px;
}

<p>The text in both paragraphs below need to stay centered, even when the text changes. The bottom paragraph should be at the same height as the first one, effectively overlapping them.</p>

<div id="container">
  <p id="p1"></p>
  <p id="p2"></p>
</div>

Answer 3

我能够通过将段落包装在一个非静态定位的容器中来实现这一目的。

然后绝对定位段落并将其宽度设置为容器的100％。现在使用text-align: center;将文本放在容器中心，您可以将容器放在页面的任何位置，并将其缩放到任何大小。段落将调整大小以适应容器，它们将保持居中并且它们将保持在相同的高度。

<强> HTML

<div id="container">
  <div id="p1"></div>
  <div id="p2"></div>
</div>

<强> CSS

#container {
  position: relative;
  width: 70%;
  left: 15%;
}

#container div {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1em;
  border: solid;
}

JSFiddle

将动态文本置于绝对定位的div中，动态宽度超出DOM流

3 个答案: