Как выровнять логотип по центру и выровнять по правому краю навигацию ul

И логотип, и навигация находятся в заголовке div, и я бы хотел, чтобы логотип был в центре, а навигация была выровнена по правому краю.

Я пытался сделать display:block и margin: auto для изображения, которое центрирует его, но затем оно переводит навигацию на следующую строку.

Текущий css:

.logo {
    display: inline-block;
    width: 400px
    margin: 0 auto;
}

/* Navigation */

#nav {
    display: inline-block;
    margin: auto; 
    padding:0; 
    list-style:none;
    float: right;
}

Прочитал, что мне пришлось указать ширину, чтобы заставить работать margin:auto, но все, что он делает, это увеличивает изображение. Спасибо.


alignment css centering
person toandang    schedule 29.02.2012    source источник
comment
Было бы очень полезно опубликовать изображение того, что вы искали (можно связать его через min.us или что-то в этом роде)   -  person Dave    schedule 29.02.2012

Ответы (1)


arrow_upward
1
arrow_downward

Удалите float из #nav и определите text-align:center для его родителя. Пишите так:

.header{
 text-align:center;
}
.logo {
    display: inline-block;
    width: 400px
}

/* Navigation */

#nav {
    display: inline-block;
    padding:0; 
    list-style:none;
    text-align:left;
}
person sandeep    schedule 29.02.2012
comment
Спасибо, я заставил его работать с выравниванием заголовка по центру и добавлением абсолютной позиции для навигации. - person toandang; 01.03.2012