Почему я не могу центрировать с маржей: 0 авто?

130

У меня есть #headerdiv, 100% widthи внутри этого div у меня есть неупорядоченный список. Я применил margin: 0 autoнеупорядоченный список, но он не будет центрировать его в заголовке div.

Кто-нибудь может сказать мне, почему? Я думал, что если я определю ширину родительского div, то неупорядоченный список сможет центрироваться с помощью margin: 0 auto. Чего мне не хватает?

Вот мой код:

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— zeckdude
источник

Какой браузер вы используете? IE / Win имеет некоторые проблемы с автоматической маржей.

— JD Frias

Почему вы тоже выставляете ul вправо? Уберите это, и, вероятно, также float: left для li, и все будет в порядке.

— Саймон

1

Я создаю панель навигации. Я вынул поплавок вправо для ul и поставил поплавок влево для li, но теперь все это помещается влево.

— zeckdude

135

Вам необходимо определить ширину центрируемого элемента, а не родительского элемента.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Изменить : Хорошо, теперь я видел тестовую страницу, и вот как, я думаю, вы этого хотите:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— PatrikAkerstrand
источник

2

что, если ширина ul будет динамической. Я думаю о динамическом добавлении другого текста в li с помощью PHP позже, поэтому я пытаюсь это предвидеть.

— zeckdude

2

Ага, тогда вы не можете центрировать, используя margin: auto;

— PatrikAkerstrand

1

Я попробовал ваше последнее предложение, но оно не сработало. Я загрузил последнюю версию с вашими рекомендациями в то же место, чтобы вы могли видеть, что я испытываю. Ul просто сдвигается вправо примерно на 50 пикселей.

— zeckdude

1

Как я сказал в своем предложении, удалите поплавок: left

— PatrikAkerstrand

1

Это отлично сработало! Огромное спасибо за то, что остались со мной и помогли мне! Эта проблема убивала меня! Еще раз спасибо!

— zeckdude

44

Встроенный блок покрывает всю строку (слева направо), поэтому левое и / или правое поле здесь не работает. Что вам нужно, так это блок, у блока есть границы слева и справа, поэтому на него могут влиять поля.

У меня это работает так:

#content {
display: block;
margin: 0 auto;
}

— Хукс
источник

Спасибо за очень полезное предложение, у меня была та же проблема со встроенным элементом, и я не мог понять, почему он не работает

— mastazi

Это лучший ответ, он работает для окон с несколькими размерами.

— Юда Правира

14

Почему нет?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
источник

Я добавил выравнивание текста: слева; to #header ul для центрирования ul и выравнивания текста в li по левому краю. Мне также нужно было настроить отображение ul как встроенный блок, чтобы ширина была динамической (авто).

— Brent Self

3

Я не знаю , почему первый ответ лучший, я попробовал и не работает на самом деле, как @ kalys.osmonov сказал, что вы можете дать , text-align:centerчтобы header, но вы должны сделать , ulкак inline-blockлучше , чем inline, а также вы должны уведомления которые text-alignмогут быть унаследованы, что в некоторой степени нехорошо, поэтому лучший способ (не работающий ниже IE 9) - использовать marginи transform. Просто удалите float rightи margin;0 autoс ul, как показано ниже:

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

Таким образом можно решить проблему создания динамической ширины ulцентра, если вам все равно IE8 и т. Д.

— Билл Доу
источник

0

Мы можем установить ширину для тега ul, тогда он выровняется по центру.

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— Вани С
источник