Как выровнять содержимое блока по центру?

Question

[akgndkut]

Как выровнять содержимое div, но если там не только текст по центру по горизонтали?

Answer 1

[Владислав Серов]

Вариант 1.
Оборачиваешь содержимое в div, даешь ему width и margin: auto;
Вариант 2.
Если absolute то можно через отрицательный margin:
1. Задаешь ширину (например 200px);
2. left: -50%;
3. И даешь отрицательный отступ в половину ширины данного блока (в данном случае margin-left: -100px)
https://jsfiddle.net/005nsd85/ - отрицательный margin

Comments

[akgndkut]

не получается, при первом варианте все ничего не происходит, при втором все улетает куда то

[akgndkut]

codepen.io/anon/pen/qOyqzK

[Владислав Серов]

Можно кусок кода с которым проблемы? И стили к ним?

[akgndkut]

надо, чтобы там был не один блок еще

[akgndkut]

.content {
margin-top: 100px;
width: 800px;
height: 1000px;
background: red;
}
.blocks {
width: 200px;
height: 200px;
padding: 10px;
margin: 10px;
background: blue;
float: left;
}

[akgndkut]

< div class="content">
< div class="blocks">

[Владислав Серов]

codepen.io/anon/pen/ZbjLzy

[akgndkut]

спасибо

[akgndkut]

а как вы посчитали ширину в div-blocks? просто если сделать блокам границу в пиксель все падает

[Владислав Серов]

akgndkut: нужно просто div-blocks дать ширину на пару пикселей больше и будет всё ровно.

[Владислав Серов]

Если у blocks border 1px то ширина div-block 726px

[akgndkut]

а как вы это посчитали?

[Владислав Серов]

Ширина одного блока = 200px;
margin: 10 у блока по бокам = 20px;
padding: 10 у блока по бокам =20px;
border: 1px у блока по бокам = 2px;
200*3=600px;
20*3=60px;
20*3=60px;
2*3=6px;
Складываем = 726px;

[Владислав Серов]

нужно просто что бы блоки влезли в div-block.
Можно делать шире на пару пикселей, глазу будет почти не заметно что чуть-чуть не по центру, но за то ничего точно не уедет.

[akgndkut]

хорошо

[akgndkut]

Vladislav Serov: а если у меня не будет картинок или блоков в контенте, а будет текст с картинками и прочим, надо, чтобы сам контент был посередине, но при паддинге, он увеличивается и косится, сделал так, все правильно, но можно как то не делать так, к как ты показывал сделать? то есть у меня margin: auto и padding: 70px 30px 20px 30px, что в итоге делает отступ сверху, но это как то выглядит не совсем профессионально codepen.io/anon/pen/yYqpBE

[Владислав Серов]

akgndkut: Это в принципе нормально

[akgndkut]

Vladislav Serov: не знал

[Андрей Павлов]

akgndkut,
Достаточно использовать только text-align:center;

Answer 2

[Александр Пупкин]

text-align:center;