Чому я не можу зосередитись з запасом: 0 авто?

130

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

Хто-небудь, будь ласка, скажіть мені, чому? Я подумав, що якщо я визначу ширину батьківського діва, то не упорядкований список повинен мати змогу зосереджуватися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

— скупость
джерело

Який браузер ви використовуєте? IE / Win має деякі проблеми з автоматичною маржею.

— JD Frias

Чому ви також пливете своїм ul на право? Вийміть це, і, мабуть, і поплавок: ліворуч, і ви повинні бути добре.

— Саймон

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 буде динамічною. Я думаю про те, щоб пізніше містити різний текст у літі з PHP, тому я намагаюся передбачити це.

— zeckdude

2

Так, тоді ви не можете центрировать за допомогою поля: auto;

— PatrikAkerstrand

1

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

— zeckdude

1

Як я вже говорив у своїй пропозиції, зніміть поплавок: зліва

— PatrikAkerstrand

1

Це спрацювало ВЕЛИКО! Дуже дякую, так що ви тримаєтесь зі мною і допомагаєте мені! Ця проблема вбиває мене! Знову дякую!

— zeckdude

43

Вбудований блок охоплює всю лінію (зліва направо), тому поле ліворуч та / або праворуч тут не працюватиме. Що вам потрібно, це блок, блок має межі зліва та справа, тому на них можна впливати поля.

Ось як це працює для мене:

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

— Мотики
джерело

Дякую за дуже корисну пропозицію, у мене була та сама проблема з вбудованим елементом, і я не міг зрозуміти, чому це не працює

— mastazi

Це найкраща відповідь і працює для вікна з кількома розмірами.

— Юда Правіра

14

Чому ні?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— калис.осмонов
джерело

Я додав вирівнювання тексту: зліва; до #header ul, щоб центрирувати ul, а текст у ліві зберігати зліва. Мені також потрібно було встановити 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%;
}

— Вані С
джерело