如何中心一个父DIV内部的三个DIVS与其他HTML标签

我有一些CMS内容块以下ASP.net页：如何中心一个父DIV内部的三个DIVS与其他HTML标签

<div class="section group" style="background: #CCCCCC; overflow: auto;"> 
    <div class="col span_1_of_3"> 
    <CMS:ContentBlock ID="ContentBlock5" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" /> 
    </div> 
    <div class="col span_1_of_3"> 
    <CMS:ContentBlock ID="ContentBlock6" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" /> 
    </div> 
    <div class="col span_1_of_3"> 
    <CMS:ContentBlock ID="ContentBlock7" runat="server" CssClass="test2" DefaultContentID="638" ClientIDMode="Static" /> 
    </div> 
</div>

产生下面的HTML源：

<div class="section group" style="background: #CCCCCC; overflow: auto;"> 
    <div class="col span_1_of_3"> 
    <div id="ContentBlock5" class="test2"> 
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5600</span></p> 
</div> 
    </div> 
    <div class="col span_1_of_3"> 
    <div id="ContentBlock6" class="test2"> 
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5650</span></p> 
</div> 
    </div> 
    <div class="col span_1_of_3"> 
    <div id="ContentBlock7" class="test2"> 
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insurance.aspx?id=473">Most Insurance Plans Accepted</a><br />914-848-5650</span></p> 
</div> 
    </div> 
</div>

CSS显示它：

 .test2 
     { 
      padding: 8px; 
      text-align: left; 
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1); 
     } 
      .test2 p 
      { 
       text-align: left; 
      } 
.test1 p { 
    text-align: left; 
    padding: 0 10px 0 10px; 
} 
.setP p 
{ 
    text-align: left; 
    padding: 10px 10px 0 10px; 
} 
/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
    height: auto; 
    overflow: auto; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1%; 
} 
.col:first-child { margin-left: 0; } 


/* GROUPING */ 
.group:before, 
.group:after { 
    content:""; 
    display:table; 
} 
.group:after { 
    clear:both; 
} 
.group { 
    zoom:1; /* For IE 6/7 */ 
} 

/* GRID OF THREE */ 
.span_3_of_3 { 
    width: 100%; 
} 
.span_2_of_3 { 
    width: 66.1%; 
} 
.span_1_of_3 { 
    width: 32.2%; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
    .col { 
     margin: 1% 0 1% 0%; 
    } 
} 

@media only screen and (max-width: 480px) { 
    .span_3_of_3 { 
     width: 100%; 
    } 
    .span_2_of_3 { 
     width: 100%; 
    } 
    .span_1_of_3 { 
     width: 100%; 
    } 
}

输出给最终用户是这样的：

enter image description here

由于图像显示三个DIVS不居中。

如何修改CSS，使其始终居中，而不管屏幕大小如何。

更新：

enter image description here

来源

2014-10-09 SearchForKnowledge

@GolezTrol - 几乎同样的标题...大声笑 – LcSalazar 2014-10-09 20:07:10

是的，我通过谷歌搜索标题找到它。这不是唯一的重复。 ;） – GolezTrol 2014-10-09 20:10:20

添加text-align: center到的div的父......在这种情况下，，section one：

.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
    height: auto; 
    overflow: auto; 
    text-align: center; 
}

此外，从col的div去除浮动，并让他们在线：

.col { 
    display: inline-block; 
    margin: 1% 0 1% 1%; 
}

Example JsFiddle

来源

2014-10-09 20:05:54 LcSalazar

除了一个问题，尝试将窗口拖到右边之前，这是很棒的。第三个盒子进入第二行。如何确保它始终保持在一行，直到480px？ – SearchForKnowledge 2014-10-09 20:17:17

@SearchForKnowledge - 在部分使用'white-space：nowrap'：http://jsfiddle.net/Lry4z15m/1/ – LcSalazar 2014-10-09 20:30:10

设置display: inline-block;到内容块你内容的宽度的100％。

然后加入text-align: center;到它的父，中心内容所有尺寸：

.test2 { text-align: center; } .test2 p { display: inline-block; }

小提琴：http://jsfiddle.net/ob1dr37h/

来源

2014-10-09 20:04:21 emmanuel

变化float:left;到display: inline-block上.col，然后添加到text-align: center.section。

来源

2014-10-09 20:06:01 jmore009

只有一个问题是第三个盒子到达下一行，我试图阻止，我用截图更新了我的问题。 – SearchForKnowledge 2014-10-09 20:09:41

然后调整你的边距，'display：inline-block'会添加1或2个像素的自然空间。但不像浮动，它会始终保持你的元素居中 – jmore009 2014-10-09 20:21:13

从第一个问题我看到你正在做的：CSS的

组合和html元素是什么导致了混乱属性。
你有p对齐中心和跨度左对齐。是什么原因？

尝试使用填充CSS属性。让p标签从div标签和css显示内嵌与文本对齐cener。

如果html标准不是必需品，你总是可以环绕p标签中心标签。

来源

2014-10-09 20:11:10

我将把属性移动到CSS，一旦我设置正确。左对齐是内部div内的文本，并且align center是将三个DIVS居中 – SearchForKnowledge 2014-10-09 20:15:10

如何中心一个父DIV内部的三个DIVS与其他HTML标签

回答

相关问题