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

时间:2019-04-28 13:00:10

标签: html css

已经浏览过其他类似的帖子,找不到类似的徽标问题。

我目前正在尝试将导航栏和徽标一起居中。因此一切都非常合适,徽标位于ProductsServices

之间

我刚刚开始使用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>

3 个答案:

答案 0 :(得分:3)

如果我对您的理解正确,那么您想要实现以下目标:

请注意,下面的部分仅用于演示目的,以突出显示元素的位置和大小,您可以在使用CSS时使用它们。

.nav * {
   border: 1px solid;  
}

还请记住,您应该通过属性设置图片的大小widthheight中的至少一个,而不是在CSS中进行设置。设置一个尺寸后,浏览器会自动计算/缩放另一个尺寸。

进一步,您可以根据需要调整图像的大小和margin-top元素的img

.nav {
   height: 50px;
}

.nav * {
   border: 1px solid;  
}

.nav img {
  float: left;
  margin-top: 10px;
}

.nav ul {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav li {
  list-style: none;
  display: inline-block;
  height: 100%;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav a {
  text-decoration: none;
}
<div class="nav">
  <img src="https://www.stackoverflowbusiness.com/hubfs/B2B-SO/images/logo-so-PRINT-4.png" height="25">
  
  <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>
</div>

答案 1 :(得分:2)

使元素居中的一种好方法是将text-align: center应用于其容器div。在这种情况下,请将.nav{text-align: center;}添加到CSS。

答案 2 :(得分:2)

如果希望图像和导航项位于同一行,则可以将div放入.nav div中。然后,您可以使用以下方法将.nav div居中:

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

要使文本项与图像对齐,您还可以在display: inline格内的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>