Question

我不得不说我是网页设计的初学者，我正在尝试建立一个带有bootstrap和Dreamweaver CC的网站，我有导航栏，我想知道如何将图像放置在导航栏的中心但是在同一排。你能帮帮我吗？

＆＃13;

<div class="navbar-header">
      <center><img src="71f7c350c2d7d3a6eb8394f66185a3e7.jpg" alt="" width="40" height="54"/></center>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        <a class="navbar-brand" href="#">Liceul Teoretic "Victor Babeș"</a></div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
  <!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
  </nav>
</div>

＆＃13;

Answer 1

你可以使用绝对定位将img放在中心位置。

img {
    position: absolute;
    left: 50%;
    margin-left: -50px !important; //this pixel amount is equal to half your image size
    display: block;
}

导航栏上的引导程序图像

1 个答案: