CSS“如何将导航栏与图像一起居中？”

debugcn 发表于 Dev

用户11327799

已经浏览了其他类似的帖子，找不到类似的带有徽标问题的帖子。

我目前正在尝试将导航栏与徽标一起居中。所以一切都完美契合，标志介于Products&Services

我刚开始接触 CSS，有非常基础的知识。

另外，有人可以帮我定心吗？- 我需要导航栏在页面居中运行。如您所见，我的未居中。

谢谢

img{
  height: 20px;
  padding: 0;
}

.nav li{
  list-style: none;
  display: inline-block;
  height: 100%;
  padding: 10px;
}

.nav a{
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="styling.css" type="text/css">


  </head>
  <body>


<img src="logo.png">

<div class="nav">
  <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Products</a></li>


  <li><a href="/">Services</a></li>
  <li><a href="/">News</a></li>
  <li><a href="/">Contact</a></li>
  </ul>
</ul>
</div>





  </body>

<script src="app.js" charset="utf-8"></script>

</html>

尼克帕森斯

如果您希望图像和导航项目在同一行上，您可以将 div 放在您的.navdiv 中。然后，您可以.nav使用以下方法将div居中：

.nav {
  display: table;
  margin: 0 auto;
}

要将文本项与图像对齐，您还可以添加display: inline到div 中的ul元素.nav。

请参阅下面的示例：

img {
  height: 20px;
  padding: 0;
}

.nav { /* center nav div */
  display: table;
  margin: 0 auto;
}

.nav li {
  list-style: none;
  display: inline-block;
  height: 100%;
  padding: 10px;
  font-size: 15px;
}

.nav a {
  text-decoration: none;
}

.nav ul {
  padding: 0;
  display: inline;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="styling.css" type="text/css">
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/">About</a></li>
      <li><a href="/">Products</a></li>
      <li><img src="https://www.stackoverflowbusiness.com/hubfs/B2B-SO/images/logo-so-PRINT-4.png" /></li>
      <li><a href="/">Services</a></li>
      <li><a href="/">News</a></li>
      <li><a href="/">Contact</a></li>
    </ul>
  </div>
</body>

<script src="app.js" charset="utf-8"></script>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。