[英]Horizontally Center elements inside the div
所以我需要创建以3或4个正方形为中心的布局。 由于现在有许多不同的屏幕(我目前有21个philips,macbook 13和ipad),并且在所有这些屏幕上的正方形都不同。
因此,我需要将其集中在任何屏幕上。 这是我的一些代码:
一些CSS:
#main{
border: 1px solid red;
margin: auto;
}
#block{
display: inline-block;
padding: 110px;
border: 1px solid red;
margin: 10px 10px;
overflow:hidden;
}
一些HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div id="block">main</div>
<div style="clear:both"></div>
</div>
</div>
我尝试了一些额外的方法以不同的方式...
所以我需要这个正方形会自动在任何屏幕上居中
由于您仅使用inline-block
,因此可以将容器的文本居中。
另外,对非唯一元素使用类。
小提琴: http : //jsfiddle.net/LWTNB/3/
更新的HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
</div>
</div>
更新的CSS:
#main{
border:1px solid red;
text-align:center; /* solution */
}
.block{
display:inline-block;
padding:110px;
border:1px solid red;
margin:10px 10px;
overflow:hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.