如何在中心對齊DIV

我正在嘗試使3個div彼此等距，並且還希望在中心對齊。我使用Foundation框架，使其responsive.It應該如何在中心對齊DIV

enter image description here

CSS：

*, *:before, *:after { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: border-box; 
} 
.large-10 { 
    width: 83.3333%; 
    } 
.column, .columns { 
    float: left; 
    padding-left: 0.9375em; 
    padding-right: 0.9375em; 
    position: relative; 
} 
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { 
    margin: 0; 
} 
*, *:before, *:after { 
    box-sizing: border-box; 
} 
body { 
    color: #222222; 
    cursor: default; 
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
} 
    html, body { 
    font-size: 100%; 
    }

和this是網站的URL。

基金會類使其強制左對齊。我無法將其對準中心。

<center> 
     <div class="large-10 columns"> 
     <div class="large-3 columns webImageText"> 
      <div class="large-12 columns subWebImageText">イト実績イト実績イト実績イト実績イト実績イト実績イト実績イト実績</div> 
      <div class="large-12 columns subWebImageText2">イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns"><img id="imageStyle" src="img/image48.JPG"></div> 
      </div> 
      <div class="large-3 columns webImageText" style="float:left;"> 
       <div class="large-12 columns subWebImageText" style="font-weight:none;">イト実績イト実績イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns subWebImageText2">イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns"><img id="imageStyle" src="img/image49.JPG"></div> 
      </div> 
      <div class="large-3 columns webImageText" style="float:left;overflow:hidden;margin-right:0;"> 
       <div class="large-12 columns subWebImageText">イト実績イト実績イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns subWebImageText2">イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns"><img id="imageStyle" src="img/image50.JPG"></div> 
      </div> 
     </div> 
    </center>

需要你的幫助。提前致謝。

來源

2014-07-10 Moumita

你可以發佈你的CSS嗎？ – Haris

編輯我的問題。 – Moumita

隨着基金會Zurb可以使用。 <小/大>-集中類，例如

<div class="row"> 
    <div class="columns small-10 small-centered"> 
     <!-- your content --> 
    </div> 
</div>

documentation有關於電網的更多信息。

來源

2014-07-10 10:38:37 chrona

完美地工作...非常感謝您 – Moumita

如果您可以將答案標記爲接受，那將會很好。 – chrona

<center> 
     <div class="large-10 columns"> 
     <div class="large-3 columns webImageText"> 
      <div class="large-12 columns subWebImageText">イト実績イト実績イト実績イト実績イト実績イト実績イト実績イト実績</div> 
      <div class="large-12 columns subWebImageText2">イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns"><img id="imageStyle" src="img/image48.JPG"></div> 
      </div> 
      <div class="large-3 columns webImageText" > 
       <div class="large-12 columns subWebImageText" style="font-weight:none;">イト実績イト実績イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns subWebImageText2">イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns"><img id="imageStyle" src="img/image49.JPG"></div> 
      </div> 
      <div class="large-3 columns webImageText"> 
       <div class="large-12 columns subWebImageText">イト実績イト実績イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns subWebImageText2">イト実績イト実績イト実績イト実績イト実績イト実績</div> 
       <div class="large-12 columns"><img id="imageStyle" src="img/image50.JPG"></div> 
      </div> 
     </div> 
    </center>

這應該對準DIV進來中心的錯誤做你已經添加浮動離開在最後兩格內聯，導致我在你的DIV刪除內聯CSS問題提供你想要的解決方案。檢查它讓我知道任何疑問

來源

2014-07-10 09:56:08 Sri

http://ec2-54-178-189-98.ap-northeast-1.compute.amazonaws.com/SamePage_Website/img/afterTest.JPG 結果就是這樣。 – Moumita

好的，你想讓圖像等於三個div的距離或你想要什麼類型的中心？ – Sri

HTML：

<div class="container"> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
</div>

CSS：

.container{ text-align:center } 
.col{ display:inline-block; min-height:200px; }

來源

2014-07-10 09:59:40 karan3112

我必須在這裏覆蓋基礎的css。你可以從我提供的網站鏈接檢查。 – Moumita

只需將css選擇器即.col更改爲.webImageText即可。嘗試使用！重要的是覆蓋現有的CSS。 .webImageText {display：inline-block; float：none！重要; } – karan3112

調整所有在中間的三個要素目標列元素他們中這樣的：

div.large-10.columns {220px auto;}

或類似的東西

div.large-10.columns{ 
margin-top:0; 
margin-right:auto; 
margin-bottom:0; 
margin-left:220px; }

將220px更改爲所需的值以將它們與所需的配置對齊，或者也可以嘗試使用邊距{0 auto}功能。 This is what it will look like

來源

2014-07-10 10:20:54 Geniusknight

試試這個

margin:0px auto;

在body標籤

來源

2014-07-10 10:28:35

如何在中心對齊DIV

回答

相關問題