如何在中心對齊DIV

Question

我正在嘗試使3 div彼此等距，並且還想在中心對齊。 我正在使用Foundation框架使其具有響應能力。

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%;
  }

這是網站網址。

基礎課程使其強制向左對齊。 我無法將其居中對齊。

<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>

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

Answer 1

   <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中添加了float作為內聯而導致的錯誤，這導致了我刪除了div中提供所需解決方案的兩個內聯css的問題。 選中它會讓我知道任何疑問

Answer 2

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; }

Answer 3

為了使中心的所有三個元素對准目標列元素，如下所示：

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

或類似的東西

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

將220px更改為所需的值以使其與所需的配置對齊，或者您也可以嘗試使用margin {0 auto}功能。

Answer 4

嘗試這個

margin:0px auto;

在身體標簽

Answer 5

通過Foundation Zurb，您可以使用以。<small / large>為中心的類，例如

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

該文檔包含有關網格的更多信息。