выровнять этот div в верхней части экрана в центре?

-1

На данный момент у меня есть div, который содержит панель навигации, и я хочу, чтобы у меня была панель навигации в середине экрана наверху; независимо от того, в какой степени оно разрешено?выровнять этот div в верхней части экрана в центре?

HTML code

<div class="navigation" > 
    <ul> 
     <li><a href="#"><span>Homepage</span></a></li> 
     <li><a href="#"><span>Products and Services</span></a></li> 
     <li><a href="#"><span>Contact Us</span></a></li> 
    </ul> 
</div>

CSS code

body { 
    margin:0px; 
    padding:0px; 
    background-image:url('/img/pattern.jpg'); 
} 

#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 

#header { 
    background-image:url('/img/header_img.png'); 
    padding:10px; 
    height:100px; 
} 


.navigation { 
    background: url(images/navigation.png); 
    height: 134px; 
    overflow: auto; 
    display: block; 
    float: left; 
    width: 500px; 
} 
.navigation * { 
    padding:0; 
    margin:0; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    text-transform: uppercase; 
} 
.navigation ul { 
    display: block; 
    float: left; 
    padding: 0px 0 0 0; 
    margin: 37px 0 0 20px; 
} 
.navigation ul li { 
    background-color:White; 
    list-style: none; 
    float: left; 
    margin: 0 0 0 5px; 
    border-radius: 10px; 
} 

.navigation ul li a { 
    background-image:url(img/navbutton_back.png); 
    display: block; 
    padding: 0 13px 0 0; 
    color: #578ba0; 
    text-decoration: none 
} 
.navigation ul li.selected a, 
.navigation ul li.hover a { 
    background-image:url(img/navbutton_back.png); 
    color: #578ba0; 
} 

.navigation ul li a span { 
    background-image:url(img/navbutton_back.png); 
    display: block; 
    padding: 15px 10px 10px 23px; 
} 
.navigation ul li.selected a span, 
.navigation ul li.hover a span { 
    background-image:url(img/navbutton_back.png); 
}

источник

2013-05-23 user2413519

Пожалуйста, в следующий раз не ограничивать себя в обеспечении только (что, если ссылки служба не работает?), но вставьте свой исходный код в свой вопрос. – Ragnarokkr

Вы должны удалить float: left; из вашего класса .navigation и добавить margin: 0 auto; к нему;

См this fiddle

источник

2013-05-23 12:25:14 Parandroid

Да, спасибо, это было правильное решение +1, плюс почему кто-то предал мой вопрос? Разве я не публиковал что-то с этим, я должен был бы – user2413519

Может быть, потому что сначала вы не вставляли yout html и css здесь. И я рекомендую вам создать jsfiddle для таких вопросов, это поможет сообществу ответить на ваши вопросы. – Parandroid

Вы можете использовать атрибут CSS margin:auto

Вот скрипку

http://jsfiddle.net/rlcrews/z28V7/1/

источник

2013-05-23 12:25:35 rlcrews

Хорошо, что работает до некоторой степени, но почему, когда я изменяю размер ширины, она становится нецентрированной? – user2413519

Не обращайте внимания, я решил это, thankyou +1 – user2413519

Рад, что вы получили его, если вам нужно сосредоточить содержимое div в зависимости от используемого вами элемента, вы можете использовать либо «left: 50%», либо «text-align: центр' – rlcrews

выровнять этот div в верхней части экрана в центре?

ответ

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