如何在中心对齐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>

该文档包含有关网格的更多信息。