Question

我有一个徽标，我试图将品牌徽标放在左侧导航栏中，但在框中居中。

以下是我目前的情况：

这是样式

<style>
    .navbar {
        margin-bottom: 0;
        background-color: #E0E0E0;
        z-index: 9999;
        border: 0;
        font-size: 12px !important;
        line-height: 1.42857143 !important;
        letter-spacing: 4px;
        border-radius: 0;
    } 
    .navbar li a, .navbar .navbar-brand {
        color: #000000 !important;
    }

    .navbar-nav li a:hover, .navbar-nav li.active a {
        color: #000000 !important;
        background-color: #fff !important;
    }

    .navbar-default .navbar-toggle {
        border-color: transparent;
        color: #fff !important;
    }  

    .jumbotron {
        background-color: #F5F5F5;
    }

    footer .glyphicon {
        font-size: 20px;
        margin-bottom: 20px;
        margin-top: 20px;
        color: #000000;
    }

    .navbar-brand {
        border: 2px solid black;
    }

</style>

<body>
    <!-- add navigation bar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
            <img src="index/img/manchucorp_black.svg" alt="" width="40" height45="40">
        </a>
        <div class="collapse navbar-collapse" id="myNavBar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li> 
          </ul>
        </div>
      </div>
    </nav>

我一直在疯狂制作新的div，容器等等，似乎无法将图像放在黑匣子的中心。

.navbar {
  margin-bottom: 0;
  background-color: #E0E0E0;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
}
.navbar li a,
.navbar .navbar-brand {
  color: #000000 !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #000000 !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.jumbotron {
  background-color: #F5F5F5;
}
footer .glyphicon {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  color: #000000;
}
.navbar-brand {
  border: 2px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <!-- add navigation bar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="http://lorempixel.com/500/500/" alt="" width="40" height="40">
      </a>
      <div class="collapse navbar-collapse" id="myNavBar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#team">Team</a>
          </li>
          <li><a href="#services">Services</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Answer 1

.navbar-brand {
  position: relative;
  width: 100px;
}

.navbar-brand > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

试试这个。希望它有所帮助。

Answer 2

简单地

在display:inline-table选择器中添加navbar-brand属性。

注意： display:inline-block可能不会根据需要提供。

＆＃13;

.navbar {
        margin-bottom: 0;
        background-color: #E0E0E0;
        z-index: 9999;
        border: 0;
        font-size: 12px !important;
        line-height: 1.42857143 !important;
        letter-spacing: 4px;
        border-radius: 0;
} 
.navbar-default .navbar-toggle {
        border-color: transparent;
        color: #fff !important;
}
.navbar-brand {
        border: 2px solid black;
        display:inline-table;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- add navigation bar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
            <img src="//lorempixel.com/500/500/" width="40" height="40">
        </a>Image include inside the box.
      </div>
    </nav>

＆＃13;

Answer 3

＆＃13;

.navbar {
  margin-bottom: 0;
  background-color: #E0E0E0;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  text-align: center;
}
.navbar li a,
.navbar .navbar-brand {
  color: #000000 !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #000000 !important;
  background-color: #fff !important;
}
.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}
.jumbotron {
  background-color: #F5F5F5;
}
footer .glyphicon {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  color: #000000;
}
a.navbar-brand {
  border: 2px solid black;
  float: none;
  display: inline-block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <!-- add navigation bar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="http://lorempixel.com/500/500/" alt="" width="40" height="40">
      </a>
      <div class="collapse navbar-collapse" id="myNavBar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#team">Team</a>
          </li>
          <li><a href="#services">Services</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

＆＃13;

这是你必须与bootstrap作斗争的情况......

.navbar {
  margin-bottom: 0;
  background-color: #E0E0E0;
  z-index: 9999;
  border: 0;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
  letter-spacing: 4px;
  border-radius: 0;
  text-align: center; /* added this */
}

a.navbar-brand { /* better target of element */
  border: 2px solid black;
  float: none; /* removed bootstrap's float */
  display: inline-block; /* removed bootstrap's display */
}

尝试将<img/>置于导航栏中的容器中心

3 个答案: