Question

好的，所以我已经开始为自己正在开展的项目建立自己的网站。我目前正在为我的网站整理布局，但我被困在导航栏上。

我希望我的导航栏可以跨越100％的网站，水平/垂直居中我的按钮（图像）。

我有什么作品......但我只是想知道我是否以最有效的方式做到这一点？

这是我的HTML。

<div id="wrapper">
  <div id="header">

    <div id="navbar_left">
    </div>

    <div id="navbar_buttons">
        <img src="../Originals/button_home.png" />
        <img src="../Originals/button_logo.png" />
    </div>

    <div id="navbar_right">
    </div>

  </div>
</div>

这是我的CSS：

#wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#header {
    height: 123px;
    width: 100%;
    background-image: url(../../Originals/header_background.png);
}

#navbar_left {
    width: 25%;
    height: 123px;
    float: left;
}

#navbar_buttons {
    height: 123px;
    width: 50%;
    float: left;
    line-height: 123px;
    text-align:center;
}

#navbar_buttons::after {
    content: ".";
    visibility: hidden;
}

#navbar_right {
    width: 25%;
    height: 123px;
    float: left;
}

Answer 1

查看this jsFiddle，了解如何简化标记和CSS的示例。它会为您的图片使用inline-block。

HTML（使用header元素）：

<div id="wrapper">
  <header>
    <img src="http://placehold.it/200x100" />
    <img src="http://placehold.it/200x100" />
  </header>
</div>

和CSS：

header {
    text-align: center;
    background: #222;
}
header img {
    display: inline-block;
    vertical-align: bottom;
}

请注意，div默认为display: block，因此您无需指定100％的宽度：它将填充可用宽度。同样，您无需声明margin或padding，因为他们没有做任何事情。

如果你可以避免它，我也会避免声明一个固定的高度：让你的父div扩展到其内容的高度。

导航栏100％的页面，中心图像

1 个答案: