Встроенный блок отображения CSS-центра?

У меня есть рабочий код здесь: http://jsfiddle.net/WVm5d/ (вам может потребоваться увеличить окно результата, чтобы увидеть эффект центра выравнивания)

Вопрос

Код работает нормально, но мне не нравится иметь display: table;. Это единственный способ, с помощью которого можно было бы выполнить выравнивание по центру. Я думаю, было бы лучше, если бы был способ использовать display: block; или display: inline-block;. Можно ли решить выравнивание центра другим способом?

Добавление фиксированного с контейнером для меня не является вариантом.

Я также буду вставлять свой код здесь, если ссылка JS Fiddle будет нарушена в будущем:

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

Ответы

Ответ 1

Попробуйте это. Я добавил text-align: center в тело и display:inline-block для обертывания, а затем удалил ваш display: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Ответ 2

Если у вас есть <div> с text-align:center;, тогда любой текст внутри него будет центрирован относительно ширины этого элемента контейнера. Элементы inline-block рассматриваются как текст для этой цели, поэтому они также будут центрированы.

Ответ 3

Вы также можете сделать это с помощью позиционирования, установить родительский div в относительный и дочерний div на абсолютный.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Ответ 4

Я только что изменил 2 параметра:

.wrap {
    display: block;
    width:661px;
}

Live Demo

Ответ 5

Вам не нужно использовать "display: table". Причина, по которой ваша маржа: 0 попытка автоматического центрирования не работает, заключается в том, что вы не указали ширину.

Это будет прекрасно работать:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it the container;
}

Вам не нужно указывать отображение: блок, так как этот div будет блокироваться по умолчанию. Вы также можете потерять переполнение: hidden.

Ответ 6

В большой статье я нашел, что лучше всего для меня было добавить% к размеру

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Ответ 7

Просто используйте:

line-height:50px

Замените "50px" на ту же высоту, что и ваш div.