與DOM外界動態寬度絕對定位的div居中的動態文本流

Question

我有兩個段落需要定位，使它們符合這些標準：

• 兩個段落必須在其容器在同一高度居中，即使他們中的一個或兩個佔用多於一行。這有效地重疊了段落。
• 段落容器必須居中在頁面上，並且其最大寬度小於頁面寬度的100％。
• 如果頁面大小調整或段落內容更改，則這些條件必須保持爲真。

我知道這需要很多記錄，所以我做了一個JSFiddle來解釋和演示需要什麼。

有趣的是，這似乎的jsfiddle要正確居中，但只有當文本佔用多行...

的StackOverflow不會讓我發佈問題沒有代碼，所以這裏的一些代碼：

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

注：我之所以說「外面DOM流」的稱號是因爲至少第二段需要是DOM外部流出，否則就不能定位在第一段的頂部。

Answer 1

我能夠通過將段落包裝在非靜態定位的容器中來實現此目的。

然後絕對放置段落，並將其寬度設置爲容器的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

Answer 2

你可以通過CSS屬性彎曲這樣

#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 3

做到這一點試試這個：

function randomNumber(low, high) {return Math.floor(Math.random() * high) + low;} 
 

 
function generateSentence(length) { 
 
\t var sentence = ""; 
 
    var count = 0; 
 
    var wordLength = randomNumber(1, 10); 
 
    for (i = 0;i < length;i++){ 
 
    if (count == wordLength) { 
 
    \t sentence += " "; 
 
     wordLength = randomNumber(1, 10); 
 
     count = 0; 
 
    } else { 
 
    \t sentence += "a"; 
 
    \t count++; 
 
    } 
 
    } 
 
    return sentence 
 
} 
 

 
var tracker = 1; 
 
setInterval(function(){ 
 
\t var randomLength = randomNumber(10, 150); 
 
    if (tracker == 1){ 
 
    \t document.getElementById('p1').innerHTML = generateSentence(randomLength); 
 
    tracker = 2; 
 
    } else { 
 
    \t 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>