如何中心一個父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標籤

回答

相關問題