在 Bootstraps 导航栏中居中图像/徽标？

Posted 2023-03-05

【中文标题】在 Bootstraps 导航栏中居中图像/徽标？

【英文标题】：Centering an image/logo in Bootstraps navbar?

【发布时间】：2012-11-28 17:34:30

【问题描述】：

因此，我目前将徽标放在导航栏的最左侧，但我希望它位于中间。我已经在这些论坛和谷歌搜索上尝试了几乎所有内容，但似乎无法更改。

这是它的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <a class="brand" href="#">
      <img src="img/logo.png" style="height:60px;>          

</div>

谢谢，

【参考方案1】：

这是一个将徽标放在工具栏中间的示例：http://jsbin.com/efagoj/1/edit。

您需要做的唯一关键更改是将float: none; margin: 0 auto; 赋予带有.brand 类的a 标记。我们添加float: none;，因为在引导程序.brand 中有一个float: left;，我们不希望它是那样的。 margin: 0 auto; 是使链接居中。

我们还需要将text-align: center; 添加到具有container-fluid 的div 中。