Центрираща заглавка (включва лого и навигация)

Работя върху заглавката на уебсайт. Разгледах stackoverflow за инструкции как да центрирам заглавката (включва лого и лента за навигация).

Използвам Dreamweaver CC и когато щракна върху бутона за визуализация, той се показва в центъра на браузъра, но вдясно има повече бяло пространство от ляво.

Текущият ми CSS:

.container { 
    width: 1000px; 
    margin-right: auto;
    margin-left: auto;
    text-align: center; 
}

.header_left { 
    float: left; 
    width: 300px;
}

.navi { 
    float: right; 
    width: 600px;
}

.navi li {
    list-style: none;
    display: inline;
}

Моят текущ HTML:

<body id="home">
    <div id="header">
        <div class="container">
            <div class="header_left">
  <a href="/bg#"><img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/></a>
        </div>
            <div class="header_right">
                <ul class="navi">
                    <li><a href="/bg#"><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></a></li>
                    <li><a href="/bg#"><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></a></li>
                    <li><a href="/bg#"><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></a></li>
                    <li><a href="/bg#"><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></a></li>
                </ul>
                    <div style="clear: both"></div>
            </div>
   </div>

РЕДАКТИРАНЕ: Пример за това как изглежда


html css centering
person Thomas    schedule 21.06.2013    source източник
comment
За мен изглежда, че има нулево празно пространство отляво и отдясно на заглавката, което има смисъл, тъй като има ширина от 100%. Това става особено ясно, когато дадете предистория.   -  person LonelyWebCrawler    schedule 21.06.2013
comment
@LonelyWebCrawler Съжаляваме, коригиран jsFiddle. Предишната не беше моя. Просто го разглеждах.   -  person Thomas    schedule 21.06.2013
comment
Извинявай, но не разбрах какво искаш. Искате ли да центрирате елементите вътре в заглавния елемент? Във вашата цигулка не виждам никакви елементи в заглавката.   -  person leoMestizo    schedule 21.06.2013
comment
@LeonardoManrique Случайно поставих грешен jsFiddle. Оправих линка. Използвах примерни снимки, намерени в мрежата. Най-добре е да увеличите резултатното пространство. Не съм сигурен дали са очите ми или нещо подобно, но дясната страна на страницата има повече бяло пространство от лявата, което я кара да не изглежда центрирана. Опитвам се да го центрирам на страницата с равни полета.   -  person Thomas    schedule 21.06.2013
comment
Центрирано е. Използвах линийка.   -  person LonelyWebCrawler    schedule 21.06.2013
comment
Като коментар, ако искате да центрирате елемент, добре е да използвате flexbox . Не поставям отговора, защото използвах отхвърлени свойства.   -  person leoMestizo    schedule 21.06.2013
comment
@LeonardoManrique, не мисля, че поддръжката на flexbox все още е достатъчно повсеместна.   -  person Derek Henderson    schedule 21.06.2013

Отговори (4)


arrow_upward
2
arrow_downward

Опитвам се да разбера проблема. Заглавката като цяло е центрирана. Елементите вътре имат проблеми с маржовете поради посочване на ширина на изображенията и след това даване на различна ширина на класа. Можете да премахнете ширината в класа и тя ще избута всеки плаващ елемент наравно с техните указани страни. След това добавете поле, за да ги избутате на желаното разстояние:

body, html {
    width: 100%;
    height: auto;
    margin: 0;
}
.container {
    background: #333;
    width: 1000px;
    margin: auto;
    text-align: center;
}
.header_left {
    float: left;
    margin-left: 70px;
    margin-top: 12px;
}
.navi {
    float: right;
    margin-right: 60px;
}
.navi li {
    list-style: none;
    display: inline;
}

http://jsfiddle.net/derekstory/zz2Dy/3/

person Derek Story    schedule 21.06.2013
comment
Много благодаря! Това работи перфектно! Единственото нещо, което не разбирам е body, html { width: 100%; height: auto; margin: 0; } - person Thomas; 21.06.2013
comment
Няма проблем! Тъкмо се отървах от лентата за превъртане. Можете да го оставите. - person Derek Story; 21.06.2013

arrow_upward
1
arrow_downward

text-align:center и float не са добри приятели :)

тествайте това: задайте ul като inline-block елемент и не плаващ: http://jsfiddle.net/zz2Dy/2/

.container { 
    width: 1000px; 
    margin-right: auto;
    margin-left: auto;
    text-align: center; 
    background:#333;
}

.header_left { 
    float: left; 

}

.navi { 
    display:inline-block;
    padding:0;
    margin:0;

}

.navi li {
    list-style: none;
    display: inline;
}
person G-Cyrillus    schedule 21.06.2013

arrow_upward
1
arrow_downward

Десният заглавен елемент има свойството text-align: center и не заема цялата ширина на елемента, така че завършва с повече бяло пространство отдясно. Ако добавите към вашата цигулка класа:

.header_right {
    text-align: right;
}

Това трябва да премахне бялото пространство отдясно.

(ако съм разбрал правилно проблема ви)

person bfuoco    schedule 21.06.2013

arrow_upward
1
arrow_downward

Вярвам, че това е, което търсите:

.container {
    margin: 0 auto;
    text-align: center;
}
.header_left {
    display: inline-block;
}
.header_right {
    display: inline-block;
}
.navi { 
    display: inline-block;
    padding: 0;
}
.navi li {
    list-style: none;
    display: inline;
}

Демо

По принцип премахнах плаващи елементи, ширини и подложки, използвах display: inline-block;.

person Derek Henderson    schedule 21.06.2013