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 到正文和 display：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屋！