Question

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

Answer 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/

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

Answer 3

右侧标题元素具有属性text-align: center，并且它不会占据元素的整个宽度，因此最终会在右侧显示更多的空白区域。如果你在课堂上添加小提琴：

.header_right {
    text-align: right;
}

那应该删除右边的空格。

（如果我理解你的问题）

Answer 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;。

Answer 5

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

中心标题（包括徽标和导航）

5 个答案: