Имам таг div
с ширина width
, зададена на 800 пиксела. Когато широчината на браузъра е по-голяма от 800 пиксела, не би трябвало да се разтяга div
, а да се премести в средата на страницата.
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Искате да го центрирате вертикално или хоризонтално? Казахте, че сте задали height
на 800 пиксела и искате div-ът да не се разтяга, когато width
е по-голяма от тази стойност...
За да центрирате хоризонтално, можете да използвате атрибута margin: auto;
в CSS. Също така, ще трябва да се уверите, че елементите body
и html
нямат никакъв margin или padding:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
За да работи правилно и в Internet Explorer 6, трябва да направите следното:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}