文本不会在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中居中

回答

相关问题