文本對齊：中心和短期浮動的div

我有一個HTML文件，它看起來是這樣的：文本對齊：中心和短期浮動的div

<div style="float:right"> 
A line of text, floating to the right 
</div> 
<div style="text-align:center"> 
And here, several lines of<br /> 
text which I want to center. 
</div>

這使得（至少在Firefox）是這樣的：

 
    And here, several lines of  A line of text, floating to the right 
         text which I want to center.

我想要的是第二個div中的文本以單個垂直軸爲中心，不受浮動div高度的影響：

 
    And here, several lines of  A line of text, floating to the right 
    text which I want to center.

現在，造成這個問題的原因是我無法更改浮動div;我只用我想要的文字來控制第二個div。此外，我不一定知道浮動div的寬度和高度。我無法使用JavaScript。我不能使用絕對定位，因爲我沒有任何控制父塊的功能，我不知道它們中哪些具有非靜態定位。我真的不想使用表格，除非沒有別的選擇。

有沒有辦法做到這一點？

來源

2009-08-16 tetromino

你能鏈接到演示這個頁面嗎？ – 2009-08-16 12:28:20

我自己的示例代碼演示了這一點。只需將示例複製到文本編輯器中，另存爲html文件，然後在瀏覽器中打開。 – tetromino 2009-08-16 12:37:32

你已經發布了所有的CSS？沒有導入的樣式，沒有重置樣式，沒有瀏覽器默認樣式，瀏覽器和/或平臺之間沒有不一致？ – 2009-08-16 12:41:41

將居中div的寬度設置爲50％，並使用margin：0 auto將其居中。

<div style="float:right"> 
     A line of text, floating to the right 
    </div> 
    <div style="width:50%;margin:0 auto;text-align:center"> 
     And here, several lines of<br /> 
     text which I want to center. 
    </div>

根據文本的長度，您可能需要調整寬度％。

來源

2009-08-16 14:09:58 Emily

謝謝！解決了這個問題。 – tetromino 2009-08-16 20:20:48

根據您的網頁上，如果兩個div的是在一個容器中，並沒有什麼合適的DIV下方（使其延伸到了所有的方式）：

<div style="float:right; height: 100%;"> 
A line of text, floating to the right 
</div> 
<div style="text-align:center;"> 
And here, several lines of<br /> 
text which I want to center. 
</div>

如果您有更多的限制，這並不滿足請將它們添加到問題中，以便我們可以獲得更好的解決方案。

更新：根據您的評論...

CSS：

.divWrapper div { height: 100%; }

HTML：

<div class="divWrapper"> 
<div style="float:right; height: 100%;"> 
A line of text, floating to the right 
</div> 
<div style="text-align:center;"> 
And here, several lines of<br /> 
text which I want to center. 
</div> 
</div>

來源

2009-08-16 12:35:47

正如我所說的，不幸的是我無法改變浮動div。就我而言，它是隻讀的。 – tetromino 2009-08-16 12:42:30

是的，身高需要設置。如果不是，頁面的其餘部分將圍繞div。有點像水中的卵石。如果保持在原處並且所有的水都在其周圍流動。除非你有一個更大的鵝卵石of course：p – KdgDev 2009-08-16 12:52:44

如果你可以控制div封裝它，通過CSS你可以應用一個高度：100％;到兩個div，通過類似： .divWrapper div {height：100％; } 這可能嗎？ – 2009-08-16 12:54:10

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> 
    <style type="text/css" media="all"> 

    #d1 {float: right; 
     clear: left; 
     width: 24%; /* it should fit inside the 25% margin between right-side of div #2 and the boundary of the page with a small (1%) gutter between the two divs */ 
    } 

    #d2 {width: 50%; 
     position: absolute; 
     top: 0; /* or whatever... */ 
     left: 50%; /* used in conjunction with margin to centre the div */ 
     margin: 0 0 0 -25%; /* moves div left */ 
    } 

</style> 
</head> 

<body> 

    <div id="d1"> 
    A line of text, floating to the right 
    </div> 

    <div id="d2"> 
    And here, several lines of<br /> 
    text which I want to center. 
    </div> 

</body> 

</html>

演示頁：here

有過我的注意力吸引到以下幾點：

現在，是什麼讓這個問題是我無法改變的浮動DIV;我只用我想要的文字來控制第二個div。此外，我不一定知道浮動div的寬度和高度。我無法使用JavaScript。我不能使用絕對定位，因爲我沒有任何控制父塊的功能，我不知道它們中哪些具有非靜態定位。我真的不想使用表格，除非沒有別的選擇。

#d2 {clear: both; 
width: 50%; 
margin: 0 0 0 25%; 
} 

#d1 {clear: both; 
float: right; 
}

這種達到你的目的，但它意味着兩個div不會水平相鄰;他們會在你想要的地方，但在不同的水平上。

來源

2009-08-16 12:39:38

如果我可以使用絕對定位，那將是一個很好的解決方案。但正如我所說，不幸的是我不能使用絕對定位，因爲我無法控制包含塊。 – tetromino 2009-08-16 12:47:11

這就是我最初詢問有關鏈接到演示頁面的原因之一;看看你有什麼合作。儘管我必須道歉，但我沒有看到我發佈時沒有「絕對」定位的要求。 – 2009-08-16 13:00:53

將顯示樣式更改爲阻止而不是內聯可能會有所幫助，但設置左側的浮動樣式也可能有所幫助。你也可以做兩個。

雖然不同的瀏覽器會以不同的方式處理這種情況，但這樣做會很麻煩。

來源

2009-08-16 13:15:13 Ruud

文本對齊：中心和短期浮動的div

回答

相關問題