it-swarm-ru.tech

CSS центр отображения встроенного блока?

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

Вопрос

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

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

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

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;
}
<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>
181
Jens Törnell

Принятое решение не сработает для меня, так как мне нужен дочерний элемент с display: inline-block, который будет горизонтально и вертикально центрирован в пределах родительского элемента шириной 100%.

Я использовал свойства Flexbox justify-content и align-items, которые соответственно позволяют центрировать элементы по горизонтали и вертикали. Если для родительского элемента будет установлено значение center, дочерний элемент (или даже несколько элементов!) Будет идеально посередине.

Это решение не требует фиксированной ширины, что было бы неприемлемо для меня, поскольку текст моей кнопки изменится.

Вот демоверсия CodePen и фрагмент соответствующего кода ниже:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}
<div class="parent">
  <a class="child" href="#0">Button</a>
</div>
43
EdA

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

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

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

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

67
Spudley

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

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

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

Это будет работать просто отлично:

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

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

0
user2166297

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

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

Live Demo

0
Myles Gray