Позиционирование центра меню CSS

Question

Я изучаю html/css. Я хочу задать немой вопрос. Я позиционирую мой заголовок

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 

находится в центре, теперь я хочу позиционировать подменит, который немного короче, чем заголовок и собирается также быть в центре, но я не могу , Помогите мне улучшить свои навыки. Заранее спасибо!

Answer 1

Если я правильно понимаю, это то, что вы должны делать.

На стороне html я бы создал заголовок, который обертывает и ваш заголовок, и ваше подменю. Это так, чтобы сосредоточить все. Вы будете в конечном итоге с помощью следующей

<div id="container"> 
    <div id="header"> 

    </div> 

    <div id="submenu"> 

    </div> 
</div> 

на стороне CSS вы могли бы сделать то же самое, как вы делали с головой, но на этот раз вы бы применить стратегию центрирующую все 3 Див тегами. Это сначала центрирует контейнер, а затем центрирует внутренние элементы внутри самого контейнера. Это будет CSS, с которым вы можете столкнуться.

#container { 
    margin: 0% auto; 
} 

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 
#submenu { 
    margin: 0% auto; 
} 

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

<div id="container" class="center"> 
     <div id="header" class="center"> 

     </div> 

     <div id="submenu" class="center"> 

     </div> 
    </div> 

.center { 
    margin: 0% auto; 
} 

#header { 
    text-align: left; 
    width: 1280px; 
} 

Надеюсь, это поможет.

Также http://www.w3schools.com/ является ресурсом

Answer 2

см скрипку

скрипку: http://jsfiddle.net/uyECX/3/

демо: http://jsfiddle.net/uyECX/3/embedded/result/