html - 在导航栏中将文本或图像居中

Question

我希望能够在导航栏中居中放置一些文本或图像，这就是我的做法。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<div class="navbar navbar-default">
  <div class="container-fluid">
    <div class="text-center navbar-text">
	  <p><img src='http://placekitten.com/g/50/50'></p>
	</div>
  </div>
</div>

但是只有当宽度小于 768px 时才会居中。我认为这与响应能力有关。如何修复它，使其在所有宽度上都居中？

Answer 1

答案很简单。如果我们看一下 Bootstrap source code , 我们可以看到最小宽度为 768px 它向左浮动。

@media (min-width: 768px) {
  .navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
  }

答案是去除 float 。

@media (min-width: 768px)
{
    .navbar-text
    {
        float: none;
    }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="text-center navbar-text">
            <p><img src='http://placekitten.com/g/50/50'></p>
        </div>
    </div>
</div>