Опитвам се да центрирам съдържанието ми. Той е настроен на 100%, а div се съдържа в тялото, което също е настроено на 100%. Имам максимум ширина: 1400px, защото не искам съдържанието ми да се простира повече от това, ако резолюцията на екрана е по-висок. Работата е там, че не работи с марджин: автоматично. Моето съдържание стои вляво, без да е на екрана по-широк от 1400px.
Ако изтриете максималната ширина, всичко е перфектно центрирано върху широки екрани, но съдържанието е опъната до целия екран ...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Отговори:
6 за отговор № 1Най-лесният начин да постигнете това е да настроите width собственост до максималната ширина, от която се нуждаете, и добавете max-width: 100%;, Това ще попречи да бъде по-голямо от 100%, но все пак ще достигне максималната ширина. Също така трябва да премахнете absolute позициониране:
0 за отговор № 2
Използвайте Flexbox ...
Поставете тези класове в родителския елемент (тялото):
HTML кодът
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Където:
- р-flexbox средства родител-flexbox
- Flex-HCC средства flexbox-хоризонтално-център-център
CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Наздраве, Леонардо
0 за отговор № 3
Можете да използвате transform техника, която не изисква допълнителни маржове или медийни заявки.
#content {
position: relative; /* "fixed" will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Ето демонстрация https://jsfiddle.net/matharden/6uduf7av/