How to align DIVs in center

Question

I'm trying to make 3 divs equidistant from each other and also want to align then in center. I am using Foundation framework to make it responsive.It should be

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

and this is the website url.

Foundation class makes it forcefully align left. I am not able to align it center.

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

Need ur help. Thanks in advance.

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>

This should align the div to come in center the mistake done you have added float left as inline in last two div that causes the issues I have removed the both inline css in your div that provide the solution you want. Check it let me know for any queries

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

To align all the three elements in the center target the column element they are within like this:

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

or something like this

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

change 220px with the desired value to align them with your desired configuration or you can also try the margin{0 auto} feature.

Answer 4

try this

margin:0px auto;

in body tag

Answer 5

With Foundation Zurb you can use the .<small/large>-centered classes, eg

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

The documentation has more information about the grid.