文本不會在div中居中

我有一個包含3個'浮動'div的div。包含的div有一行文本。三個浮動內部divs也有一行文字。文本不會在div中居中

當我爲最外面的包含div指定文本對齊中心時，三個嵌套div首先出現，一行左右彼此相鄰，然後包含div的文本出現在包含的右側divs，集中在他們右邊的空間中。

相反，我不明白爲什麼最外面的包含div的文本不會出現在瀏覽器窗口的中心位置，然後低於3包含的div和他們的文本會出現。這就是我需要發生的事情。

這是代碼。順便說一下，我試圖在這個問題中嵌入一個.jpg圖片，以便您可以看到問題 - 任何人都知道如何在此處顯示屏幕截圖或.jpg問題？

<head> 

<style> 
#myRowStyles 
{ 
    text-align:center; 
    margin-bottom:100px; 
    background-color:#b0e0e6; 
    border: 1px solid red; 
}  

#leftSide 
{ 
    width:120px; 
    float:left; 
    margin-left:10px; 
    margin-top:30px; 
    border: 1px solid red; 
} 

#centerPiece 
{ 
    width:120px; 
    float:left; 
    margin-left:10px; 
    margin-top:30px; 
    border: 1px solid red; 
} 

#rightSide 
{ 
    width:120px; 
    float:left; 
    margin-left:10px; 
    margin-top:30px; 
    border: 1px solid red; 
} 
</style> 
</head> 


<div id="myRowStyles"><b>THIS IS THE TOP OF THE ROW</b> 
    <div id="leftSide"> LEFT SIDE -- Leftie 
    </div> 
    <div id="centerPiece"> Centerpiece, Folks. 
    </div> 
    <div id="rightSide"> All Righty -- RIGHT SIDE 
    </div> 
</div> 
<div style="clear:both"> 
</div> 
<div id="myRowStyles"><b>THIS IS ROW #2</b> 
    <div id="leftSide"> LEFT SIDE -- Leftie 
    </div> 
    <div id="centerPiece"> Centerpiece, Folks. 
    </div> 
    <div id="rightSide"> All Righty -- RIGHT SIDE 
    </div> 
</div>

來源

2011-11-26 wantTheBest

？ – Zhianc

嗨jc，我只是想要在瀏覽器窗口和三個內部包含的div上面居中的最外面的包含div的文本。 – wantTheBest

我認爲，爲了使div的行爲像您必須定義顯示錶屬性在CSS：

#container { 
display: table; 
} 

#row { 
display: table-row; 
} 

#left, #right, #middle { 
display: table-cell; 
}

所以，你還需要在添加一個額外的<div>容器的開始。我沒有測試過這個。

而且，我不使用的DIV時想你可以做一個單行跨度3列，所以你必須做這樣的事情：要居中的所有文本

<head> 

<style> 

#container { 
    width:90%; 
    float:center; 
    margin-left:10px; 
    margin-top:30px; 
    border: 1px solid blue; 
    text-align:centre; 
    display: table; 
} 

#myRowStyles 
{ 
    text-align:center; 
    background-color:#b0e0e6; 
    border: 1px solid red; 
    display: table-row; 

}  

#leftSide,#centerPiece,#rightSide 
{ 
    width:120px; 
    margin-left:10px; 
    margin-top:30px; 
    border: 1px solid red; 
    display: table-cell; 

} 
</style> 
</head> 

<div id="container"> 
<div id="myRowStyles"> 
    <div id="leftSide"> 
    </div> 
    <div id="centerPiece"> Row 1 
    </div> 
    <div id="rightSide"> 
    </div> 
</div> 
<div id="myRowStyles"> 
    <div id="leftSide"> LEFT SIDE -- Leftie 
    </div> 
    <div id="centerPiece"> Centerpiece, Folks. 
    </div> 
    <div id="rightSide"> All Righty -- RIGHT SIDE 
    </div> 
</div> 


<div id="myRowStyles"> 
    <div id="leftSide"> 
    </div> 
    <div id="centerPiece"> Row 2 
    </div> 
    <div id="rightSide"> 
    </div> 
</div> 
<div id="myRowStyles"> 
    <div id="leftSide"> LEFT SIDE -- Leftie 
    </div> 
    <div id="centerPiece"> Centerpiece, Folks. 
    </div> 
    <div id="rightSide"> All Righty -- RIGHT SIDE 
    </div> 
</div> 
</div>

來源

2011-11-26 01:18:14 sooper

如果您不確定它是否有效，請不要發佈答案。此外，僅供參考，某些版本的IE不能使用'display：table'。 – Sparky

只是想幫助。抱歉，我不知道它不適用於某些版本的IE。我已經編輯並測試了上述代碼，並且它似乎可以工作（Safari）。 – sooper

大家好，我非常感謝你的幫助！在提升白旗尋求幫助之前，我一直在半天時間裏搞亂它，像往常一樣，你們真的經歷過，謝謝大家，我不在那裏，但是Sooper的想法讓我相信了我的信仰是最好的方式 - 我現在有了我想要的文本，居中在其他3個div之上，不再包含它們 - 它只是位於3個浮動div之上的另一個div。然後我遵循Sooper的建議，並添加了一個新的包含div的瀏覽器爲中心的文本和它下面的三個div浮動在一行中 - 我將很快發佈代碼。 – wantTheBest

首先，您在頁面上有多個相同的ID。那很糟。將它們更改爲類。

第二個給myRowStyles一個寬度。

來源

2011-11-26 01:10:47 RedWolves

嗨，我試過寬度= 100px和寬度= 400px甚至寬度= 100％在最外層的div使用myRowStyles，這仍然不居中最外層包含div的文本在瀏覽器窗口的中間和3內部div的上面 – wantTheBest

嘗試是這樣的：http://jsfiddle.net/We74E/2/

來源

2011-11-26 01:14:26

Simon在jsfiddle中看起來不錯，但是我複製了你的第一個myRowStyles，並在Firefox 8.0中試了一下，然後我嘗試了你的第二個，並且在Firefox中它看起來不像jsfiddle，並且我運行這個StackOverflow會話到jsfiddle）在Windows資源管理器中，也許這就是爲什麼。 – wantTheBest

你有沒有注意到我用類替換了id？ –

文本不會在div中居中

回答

相關問題