Html 对中收割台（包括徽标和导航）_Html_Css_Centering

Html 对中收割台（包括徽标和导航）

html css

Html 对中收割台（包括徽标和导航）,html,css,centering,Html,Css,Centering,我正在制作一个网站的标题。我已经查看了stackoverflow，了解如何将标题居中（包括徽标和导航栏）的说明我正在使用Dreamweaver CC，当我单击预览按钮时，它会显示在浏览器中央，但右侧的空白比左侧的多我当前的CSS： .container { width: 1000px; margin-right: auto; margin-left: auto; text-align: center; } .header_left { flo

我正在制作一个网站的标题。我已经查看了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>

编辑：

文本对齐：居中和浮动不交好朋友：）

测试：将ul设置为内联块元素且不浮动：

文本对齐：居中和浮动不交好朋友：）

测试：将ul设置为内联块元素且不浮动：

右标题元素具有属性

text align:center

，并且它不占用元素的整个宽度，因此它在右侧有更多的空白。如果你在小提琴课上加上：

.header_right {
    text-align: right;
}

这将删除右侧的空白

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

右侧标题元素具有属性

text align:center

，并且它没有占据元素的整个宽度，因此它在右侧有更多的空白。如果你在小提琴课上加上：

.header_right {
    text-align: right;
}

这将删除右侧的空白

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

试图理解问题。标题作为一个整体居中。由于在图像上指定宽度，然后为类指定不同的宽度，因此内部的元素存在边距问题。您可以移除类中的宽度，它会将每个浮动元素推到其指定的边上。然后添加边距，将其推至所需的距离：

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

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

我相信这就是您想要的：

.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块
我相信这就是您要寻找的：
.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块
对我来说，标题的左右两侧似乎没有空格，这是有意义的，因为它的宽度为100%。这一点在您需要时变得尤为明显。@LonelyWebCrawler抱歉，修复了JSFIDLE。前一个不是我的。我只是检查一下。对不起，我不明白你想要什么。是否要将元素居中放置在header元素内？在你的小提琴中，我看不到标题中的任何元素。@LeonardoManrique我不小心放错了一个JSFIDLE。我修复了链接。我使用了网上的图片样本。最好扩大结果空间。我不确定是我的眼睛还是别的什么，但页面的右侧比左侧有更多的空白，使它看起来不在中间。我试着让它在页面上以相等的边距居中，居中。我用了一把尺子，在我看来，页眉的左右两边似乎都是零空格，这是有道理的，因为它的宽度是100%。这一点在您需要时变得尤为明显。@LonelyWebCrawler抱歉，修复了JSFIDLE。前一个不是我的。我只是检查一下。对不起，我不明白你想要什么。是否要将元素居中放置在header元素内？在你的小提琴中，我看不到标题中的任何元素。@LeonardoManrique我不小心放错了一个JSFIDLE。我修复了链接。我使用了网上的图片样本。最好扩大结果空间。我不确定是我的眼睛还是别的什么，但页面的右侧比左侧有更多的空白，使它看起来不在中间。我试着让它在页面上以相等的边距居中，居中。我用了把尺子，非常感谢！这工作做得很好！我唯一不明白的是body，html{width:100%；height:auto；margin:0；}
没问题！我只是想摆脱滚动条。你可以省掉它。非常感谢你！这工作做得很好！我唯一不明白的是body，html{width:100%；height:auto；margin:0；}
没问题！我只是想摆脱滚动条。你可以省去它。