个人中心
gpt4 book ai didi

html - 带有居中 Logo 的导航栏

转载 作者：太空宇宙 更新时间：2023-11-03 22:42:35 25 4
gpt4 key购买 nike

我目前正在为页面设计导航栏。我希望 Logo 位于按钮和列表之间的中间。目前看起来像这样: Navbar

我的 html 和 css:

/**
  GENERAL
                  */

body {
  font-family: 'Roboto', sans-serif;
}

/**
  NAVIGATION BAR
                  */

.navbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
              0 1px 2px rgba(0, 0, 0, 0.24);
}

/* center */

.navbar .center {
  position: relative;
/*  width: 100%; */
  text-align: center;
  float: none;
/*  height: 100px; */
/*  margin-top: auto; */
}

/*
  margin-top: 1.33em;
}*/

.navbar .center a, img {
  color: black;
  text-decoration: none;
  font-family: 'Abril Fatface', cursive;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
}

.navbar .center a:hover, img:hover {
  opacity: .5;
}

/* left */

.navbar ul {
  list-style: none;
  line-height: 1.85714286em;
  position: relative;
  }

.navbar .left a {
  float: left;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar li {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
}

.navbar li:not(:hover):not(.active) {
  opacity: .5;
}

/* right */

.navbar .right a {
  margin-left: 16px;
  float: right;
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title>Blog Layout</title>

  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Fonts -->
    <!-- Main Font-->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <!-- Logo Font-->
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">

  <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

</head>

<body>

  <header class="navbar hidden-sm-down">
    <div class="container">

      <div class="center">
        <h4 href="#">
          <a href="#">Test Blog.</a>
        </h4>
      </div>


        <div class="left">
          <ul>
            <li class="active">
              <a href="#">Home</a>
            </li>

            <li>
              <a href="#">About</a>
            </li>

            <li>
              <a href="#">Contact</a>
            </li>
          </ul>
        </div>

        <div class="right">
          <a class="btn btn-primary" href="#" role="button">Register</a>
          <a class="btn btn-secondary" href="#" role="button">Login</a>
        </div>

    </div>
  </header>

</body>

</html>

在我使用 position: absolute; 之前对于我的 .navbar .center但这破坏了 Bootstrap 按钮并弄乱了行顶部和底部之间的间距。

我已经试过了 <div class="row">有了它，但这完全破坏了我的导航栏。

请知道我是 Css 和 Bootstrap 的初学者。

感谢您的帮助，

汤姆

最佳答案

在父级上为 3 个标题项使用 flex，将每个标题项设置为 flex-grow: 1; 和 flex-basis: 0(或 flex: 1 0 0)让它们平均占据整个标题的 1/3，给 .left 一个 order: -1 将其放在行的开头，然后在 flex 父级上使用 align-items:center 使元素垂直居中。如果您希望底部对齐，也可以使用 bottom 或 baseline。您可以在此处阅读有关 flex 选项的更多信息 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

/**
  GENERAL
                  */

body {
  font-family: 'Roboto', sans-serif;
}


/**
  NAVIGATION BAR
                  */

.navbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}


/* center */

.navbar .center {
  position: relative;
  /*  width: 100%; */
  text-align: center;
  float: none;
  /*  height: 100px; */
  /*  margin-top: auto; */
}


/*
  margin-top: 1.33em;
}*/

.navbar .center a,
img {
  color: black;
  text-decoration: none;
  font-family: 'Abril Fatface', cursive;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
}

.navbar .center a:hover,
img:hover {
  opacity: .5;
}


/* left */

.navbar ul {
  list-style: none;
  line-height: 1.85714286em;
  position: relative;
}

.navbar .left a {
  float: left;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar li {
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
}

.navbar li:not(:hover):not(.active) {
  opacity: .5;
}


/* right */

.navbar .right a {
  margin-left: 16px;
  float: right;
}

.navbar > .container {
  display: flex;
  align-items: center;
}

.navbar > .container > div {
  flex: 1 0 0;
}

.navbar .left {
  order: -1;
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title>Blog Layout</title>

  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Fonts -->
  <!-- Main Font-->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <!-- Logo Font-->
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

</head>

<body>

  <header class="navbar hidden-sm-down">
    <div class="container">

      <div class="center">
        <h4 href="#">
          <a href="#">Test Blog.</a>
        </h4>
      </div>


      <div class="left">
        <ul>
          <li class="active">
            <a href="#">Home</a>
          </li>

          <li>
            <a href="#">About</a>
          </li>

          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>

      <div class="right">
        <a class="btn btn-primary" href="#" role="button">Register</a>
        <a class="btn btn-secondary" href="#" role="button">Login</a>
      </div>

    </div>
  </header>

</body>

</html>

关于html - 带有居中 Logo 的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43441382/

25 4 0
文章推荐： node.js - 从 Loopback 远程方法返回 XML 作为响应
文章推荐： c# - 如何使用 TFS 客户端库获取 PullRequest 的 Web URL？
文章推荐： node.js - 如何通过 id 查找并删除数组中的 Mongoose 子文档？
文章推荐： c# - 系统.ArgumentNullException : Value cannot be null in unit test - C#