带有居中徽标的导航栏答案

【问题标题】：Navbar with centered logo带有居中徽标的导航栏
【发布时间】：2017-04-17 04:05:36
【问题描述】：

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

我的 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 之前，但这破坏了引导按钮并弄乱了行的顶部和底部之间的间距。

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

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

感谢您的帮助，

汤姆

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

在父项上使用flex 用于3 个标题项，将每个标题项设置为flex-grow: 1; 和flex-basis: 0（或flex: 1 0 0）以使它们均匀地占据整个标题的1/3，给@ 987654326@ 和 order: -1 将其放在行的开头，然后在 flex 父级上使用 align-items: center 将项目垂直居中。如果您希望它底部对齐，您也可以使用bottom 或baseline。您可以在此处阅读有关弹性选项的更多信息 - 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>

【讨论】：

【解决方案2】：

enter image description here这是解决您问题的简单方法

HTML 文件

<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
     </div>
     <div class="collapse navbar-collapse" id="navbar-primary-collapse">
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#"><img id="logo-navbar-middle" src="images-url" width="200" alt="Logo Thing main logo"></a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
       </ul>
     </div><!-- /.navbar-collapse -->
     </div><!-- /.container-fluid -->
 </nav>
 </header><!-- header role="banner" -->

【讨论】：

我在 codepen 上也看到过这个，但不是我要找的，因为当一侧少一个 <li> 时，整个导航栏不再对称。还是非常感谢你 :)