带有居中徽标的导航栏

时间：2017-04-16 19:45:21

标签： html css twitter-bootstrap navbar

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

我的HTML＆amp; css：

＆＃13;
＆＃13; 
/**
  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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

之前我使用position: absolute;作为我的.navbar .center，但这打破了引导按钮并且与行的顶部和底部之间的间距混乱。

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

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

感谢您的帮助，

汤姆

2 个答案:

答案 0 :(得分：2)

在3个标题项的父级上使用flex，将每个标题项设置为flex-grow: 1;和flex-basis: 0（或flex: 1 0 0）以使它们均匀占用1 /在整个标题的第3位，将.left order: -1放在行的开头，然后使用align-items: center父级flex将项目垂直居中。如果您希望底部对齐，也可以使用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>

答案 1 :(得分：1)

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" -->
相关问题
最新问题