Question

因此，我对HTML5编码和CSS的了解非常有限。我正在尝试为我的职业健康与安全咨询公司开发一个网站。

我从导航栏，徽标和导航按钮开始。但是，我似乎无法使文本垂直居中于导航栏的中央，而使它们水平居中地被阻塞。另外，我注意到随着我增加和减小浏览器大小，文本实际上超出了导航栏。

我似乎无法在此处发布我的代码。 Here是代码的链接：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <link rel="stylesheet" href="css/stylesheet.css"/>
<title>CMK Safety Solutions - Home</title>
</head>

<body>
    <div class="navigation-bar">
        <div id="navigation-container">
                <img src="images/logopng.png" height="120px"/>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Services</a></li>
                <li><a href="#">Current Clients/Projects</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>
</body>

这是CSS

body {
  margin: 0;
  padding: 0;
}

.logo {
  float: right;
}
/* ~~ Top Navigation Bar ~~ */

#navigation-container {
    margin: 0 auto;
  height: 120px;
}

.navigation-bar {
  background-color: #000000;
  height: 120px;
  width: 100%;
}

.navigation-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: right;
  display:inline-block;
  vertical-align:top;
}

.navigation-bar li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline-block;
  text-align: right;
}

.navigation-bar li a {
  color: #808080;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 1;
  text-align: right;
}

Answer 1

诸如此类的情况：https://jsfiddle.net/mulperi/189so4Ln/

在容器上使用下面的代码片段，使其向右按下导航按钮，向左按下徽标。一切都垂直居中：

#navigation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

我所做的是从容器中移除了静态高度，因此当屏幕较小时，按钮将不会被推到容器外部。

这实际上是要考虑的事情。您可以使用media query来检查屏幕是小于还是大于指定的最小宽度或最大宽度，并为该场景应用不同的样式集。就像列导航一样，例如在我的小提琴中。尝试缩小屏幕以查看当屏幕小于400px时导航链接如何改变方向。

@media screen and (min-width: 400px) {
  .navigation-bar li {
    display: inline-block;
  }
}

作为旁注，请尝试像<nav>一样使用HTML5 semantic elements进行导航：）

我希望这会有所帮助！

导航栏文本的中心，并向右对齐。缩小页面大小时，请保持导航栏完好无损

1 个答案: