margin: 0 авто не центрирование?

Я пробовал следующий код в Chrome, Firefox и Safari, но мой div не совсем центрирован.margin: 0 авто не центрирование?

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link href="custom.css" media="screen" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div class="center">Hello!</div> 
</body> 
</html>

custom.css:

.center { 
    width: 400px; 
    margin: 0 auto; 
    border: 5px solid black; 
}

Это производит следующие действия в Chrome: alt text

, и вы можете видеть, что левое поле больше, чем правая поле.

Что я делаю неправильно?

источник

2010-10-30 grautur

Это ваш полный файл 'custom.css'? Как выглядит 'padding' на ваших' 'и' '? –

Да, это был мой полный файл custom.css. Я не понимал, что на html и body есть пометка или поля по умолчанию, так что ответ Time Machine исправил это. – grautur

получайте удовольствие!О, не забудьте нажать зеленую галочку, прежде чем зомби съест вас, так как это Хэллоуин. :) – 2010-10-30 20:30:10

Это потому, что тело имеет запас (по умолчанию для браузеров):

body { margin: 0px; }

Вы можете использовать CSS reset.

Это должно выглядеть нормально, если ваше окно больше. В вашем скриншоте это как:

mug

источник

2010-10-30 20:15:13

Можно ли применить 'body {margin: 0 auto; } ', чтобы центрировать страницу, или мы должны добавлять обертку' div' с идентификатором, чтобы избежать каких-либо ошибок? Благодаря! Например, здесь предлагается использовать #wrapper, а также применить 'text-align: center' к телу: http://www.webdesignerforum.co.uk/topic/2473-tutorial-how-to-center-a -site-using-css/(но на самом деле это не очень хорошо) – Baumr

-3

Попробуйте это как CSS для вашего класса .center:

.center { ширина: 400px; margin-left: auto; margin-right: auto; border: 5px solid black; }

источник

2010-10-30 20:14:15 3sdmx

окно слишком узкое. Автоматическое выравнивание элементов центра в доступном пространстве, если пространство уже, чем элемент, то оно выравнивается влево.

Таким образом, слева направо вы видите прописку или маржу на элементе body (маржа в этом случае, так как это Chrome), затем граница для div, затем 400 пикселей ширины, затем следующая граница и то край окна, поскольку нет больше места для рендеринга правого края тела.

источник

2010-10-30 20:18:22 Quentin

У меня возникли проблемы с пусковыми центрами в хроме. давая ширину кнопкам. Но это вызывает проблему со всеми кнопками, имеющими ширину.

Это исправление, похоже, выглядит счастливым в браузерах. Главным решением было бы дать кнопкам типа ввода ширину, которая работает, но когда у вас есть большое веб-приложение, управление всем этим может оказаться невозможным.

Нашли это, да, это взломать, но, похоже, работает в IE7-9 FF chrome.

.submitArea .actButton {margin-right: auto !important; margin-left: auto !important; display: block;} 
@media screen and (-webkit-min-device-pixel-ratio:0) { .submitArea .actButton {display: inline-block !important;}} /* chrome hack - needs width for buttons to center */

источник

2012-05-10 13:25:58

-1

необходимо добавить относительное позиционирование к вашему css.

.center { 
position:relative; 
width: 400px; 
margin: 0 auto; 
border: 5px solid black; 
}

источник

2012-11-13 23:11:07

Я так не думаю. – Sven

margin: 0 авто не центрирование?

ответ

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