Html 文本不会在div中居中
我有一个div，其中包含3个浮动div。包含的div有一行文本。三个浮动的内部div也有一行文本 当我为最外层的包含div指定text align center时，三个嵌套div首先显示在一行上，从左到右相邻，然后包含div的文本显示在包含div的右侧，居中于它们右侧的空间中 相反，我不明白为什么最外面包含div的文本不会显示在浏览器窗口的中心，然后在下面显示3个包含的div及其文本。这就是我需要做的 这是代码。顺便说一下，我试图在这个问题中嵌入一个.jpg图像，这样你就可以看到问题了——有人知道如何在问题中显示屏幕截图或.jpg吗Html 文本不会在div中居中,html,css,Html,Css,我有一个div，其中包含3个浮动div。包含的div有一行文本。三个浮动的内部div也有一行文本 当我为最外层的包含div指定text align center时，三个嵌套div首先显示在一行上，从左到右相邻，然后包含div的文本显示在包含div的右侧，居中于它们右侧的空间中 相反，我不明白为什么最外面包含div的文本不会显示在浏览器窗口的中心，然后在下面显示3个包含的div及其文本。这就是我需要做的 这是代码。顺便说一下，我试图在这个问题中嵌入一个.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>
#myRowStyles
{
文本对齐：居中；
边缘底部：100px；
背景色：#b0e0e6；
边框：1px纯红；
}
#左边
{
宽度：120px；
浮动：左；
左边距：10px；
边缘顶部：30px；
边框：1px纯红；
}
#中心
{
宽度：120px；
浮动：左；
左边距：10px；
边缘顶部：30px；
边框：1px纯红；
}
#右侧
{
宽度：120px；
浮动：左；
左边距：10px；
边缘顶部：30px；
边框：1px纯红；
}
这是第一排
左边，左边
伙计们，这是最重要的。
好的，右边
这是第二排
左边，左边
伙计们，这是最重要的。
好的，右边
第二，给myRowStyles一个宽度。试试这样的方法：我认为要使div的行为类似于表，必须在CSS中定义显示属性：
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
<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>
#容器{
宽度：90%；
浮动：中心；
左边距：10px；
边缘顶部：30px；
边框：1px纯蓝色；
文本对齐：居中；
显示：表格；
}
#myRowStyles
{
文本对齐：居中；
背景色：#b0e0e6；
边框：1px纯红；
显示：表格行；
}
#左侧，#中心，#右侧
{
宽度：120px；
左边距：10px；
边缘顶部：30px；
边框：1px纯红；
显示：表格单元格；
}
一排
左边，左边
伙计们，这是最重要的。
好的，右边
第2排
左边，左边
伙计们，这是最重要的。
好的，右边
display:table