0

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

编辑：它看起来像什么的样本

4

5 回答 5

2

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

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/

于 2013-06-21T17:15:33.307 回答
1

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;
}
于 2013-06-21T17:11:50.713 回答
1

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

.header_right {
    text-align: right;
}

那应该删除右侧的空白。

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

于 2013-06-21T17:12:11.167 回答
1

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

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

于 2013-06-21T17:16:49.697 回答
0 
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>
于 2013-06-21T17:14:30.557 回答