居中标题（包括徽标和导航）答案

【问题标题】：Centering header (includes logo & navigation)居中标题（包括徽标和导航）
【发布时间】：2013-06-22 01:16:49
【问题描述】：

我正在处理网站的标题。我查看了 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>

编辑：Sample of what it looks like

【问题讨论】：

对我来说，标题左右两边的空格似乎为零，这是有道理的，因为它的宽度为 100%。当您 give it a background 时，这一点变得尤为明显。
@LonelyWebCrawler 抱歉，已修复 jsFiddle。上一个不是我的。我只是在检查它。
对不起，我不明白你想要什么。你想在标题元素中居中元素吗？在您的小提琴中，我看不到标题中的任何元素。
@LeonardoManrique 我不小心放错了 jsFiddle。我修复了链接。我使用了在网上找到的示例图片。最好扩大结果空间。我不确定是我的眼睛还是什么，但是页面的右侧比左侧有更多的空白区域，使它看起来不在中心。我试图让它以相同的边距居中。
居中。我用了尺子。

标签： html css centering

【解决方案1】：

试图理解问题。整个标题居中。由于在图像上指定宽度，然后为类赋予不同的宽度，因此内部元素存在边距问题。您可以删除类中的宽度，它会将每个浮动元素推向它们指定的边。然后添加边距以将它们推到您想要的距离：

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/

【讨论】：

非常感谢！这非常有效！我唯一不明白的是body, html { width: 100%; height: auto; margin: 0; }
没问题！我刚刚摆脱了滚动条。你可以忽略它。

【解决方案2】：

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;
}

【讨论】：

【解决方案3】：

右边的表头元素有text-align: center属性，它并没有占据元素的整个宽度，所以它的右边有更多的空白。如果您将课程添加到小提琴中：

.header_right {
    text-align: right;
}

这应该会删除右边的空白。

（如果我正确理解了您的问题）

【讨论】：

【解决方案4】：

我相信这就是您正在寻找的：

.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;
}

Demo

基本上，我已经删除了浮动和宽度以及填充，使用了display: inline-block;。

【讨论】：

【解决方案5】：

<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>

【讨论】：