Центральный заголовок (включая логотип и навигацию)

Я работаю над заголовком веб-сайта. Я просмотрел 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="#"><img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/></a>
        </div>
            <div class="header_right">
                <ul class="navi">
                    <li><a href="#"><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></a></li>
                    <li><a href="#"><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 как элемент встроенного блока, а не плавающий: 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