Центрирующая жидкость div, имеющая максимальную ширину

Я пытаюсь сосредоточить свой контент div. Он установлен на 100%, а div содержится в теле, который также установлен на 100%. У меня максимальная ширина: 1400 пикселей, потому что я не хочу, чтобы мой контент растягивался больше, чем если бы разрешение экрана было выше. Дело в том, что он не работает с использованием margin: auto. Мой контент стоит слева, неэкранный на экране шире 1400 пикселей.Центрирующая жидкость div, имеющая максимальную ширину

Если удалить максимальную ширину, все идеально центрирован на широких экранах, но содержание растягивается на весь экран ...

#content { 
width: 100%; 
height: auto; 
position: absolute; 
top: 400px; 
margin: 0 auto; 
margin-top: 50px; 
display: none; 
max-width: 1400px;

}

источник

2013-06-20 Xavier

Самый простой способ для достижения этой цели , заключается в том, чтобы установить свойство width на максимальную необходимую ширину и добавить max-width: 100%;. Это предотвратит его превышение на 100%, но при этом будет доходить до максимальной ширины. Кроме того, вы должны удалить absolute позиционирование:

JS Fiddle

источник

2013-06-20 16:22:58

Или просто 'поле: 0 авто;' – rybo111

Использование Flexbox ...

Положите это классы родительского элемента (тела):

HTML-

<body class="p-flexbox flex-hcc"> 
<!-- The content --> 
</body>

Где:

р-Flexbox означает родитель-Flexbox
изгибать-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;

}

Cheers, Leonardo

источник

2013-06-20 16:23:21 leoMestizo

Вы можете использовать технику 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/

источник

2016-09-27 16:04:10 matharden

Центрирующая жидкость div, имеющая максимальную ширину

ответ

Смежные вопросы