[英]How to align DIVs in center
I'm trying to make 3 divs equidistant from each other and also want to align then in center. 我正在尝试使3 div彼此等距,并且还想在中心对齐。 I am using Foundation framework to make it responsive.It should be
我正在使用Foundation框架使其具有响应能力。
css: 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.
提前致谢。
<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. 这应该使div居中对齐,这是由于您在最后两个div中添加了float作为内联而导致的错误,这导致了我删除了div中提供所需解决方案的两个内联css的问题。 Check it let me know for any queries
选中它会让我知道任何疑问
HTML : HTML:
<div class="container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
CSS : CSS:
.container{ text-align:center }
.col{ display:inline-block; min-height:200px; }
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. 将220px更改为所需的值以使其与所需的配置对齐,或者您也可以尝试使用margin {0 auto}功能。
try this 尝试这个
margin:0px auto;
in body tag 在身体标签
With Foundation Zurb you can use the .<small/large>-centered classes, eg 通过Foundation Zurb,您可以使用以。<small / large>为中心的类,例如
<div class="row">
<div class="columns small-10 small-centered">
<!-- your content -->
</div>
</div>
The documentation has more information about the grid. 该文档包含有关网格的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.