CSS中心显示在线块? [英] CSS center display inline block?
问题描述
我在这里有一个工作代码: http://jsfiddle.net/WVm5d/ (您可能需要使结果窗口更大才能看到对齐中心效果)
I have a working code here: http://jsfiddle.net/WVm5d/ (you might need to make the result window bigger to see the align center effect)
问题
代码工作正常,但我不喜欢有 display:table;
。这是我可以使包装类对齐中心的唯一方法。我认为如果有一个方法使用 display:block;
或 display:inline-block;
。是否可以用另一种方式解决align中心?
The code works fine but I don't like to have display: table;
. It's the only way I could make the wrap-class align center. I think it would be better if there was a way to use display: block;
or display: inline-block;
. Is it possible to solve the align center another way?
向容器添加一个固定的对我来说不是一个选项。
Adding a fixed with to the container is not an option for me.
如果未来的JS Fiddle链接被破坏,我还将在此粘贴我的代码:
/ strong>
HTML
<div class="wrap">
<div class="sidebar">
Sidebar
</div>
<div class="container">
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
</div>
<div class="sidebar">
Sidebar
</div>
</div>
CSS
body {
background: #bbb;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: table;
overflow: hidden;
}
.sidebar {
width: 200px;
float: left;
background: #eee;
}
.container {
margin: 0 auto;
background: #ddd;
display: block;
float: left;
padding: 5px;
}
.box {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
float: left;
}
.box:nth-child(3n+1) {
clear: left;
}
推荐答案
我添加了 text-align:center
到正文和显示:inline-block
c $ c> display:table
Try this. I added text-align: center
to body and display:inline-block
to wrap, and then removed your display: table
body {
background: #bbb;
text-align: center;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
这篇关于CSS中心显示在线块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!