如何将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%;
  }

和this是网址网址。

基础课          使它强行对齐左。我无法将它对齐。

<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导致问题我已经删除你的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，您可以使用。＆lt; small / large＆gt; -centered 类，例如

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

documentation有关于网格的更多信息。