居中图像引导程序答案

【问题标题】：Center an image bootstrap居中图像引导程序
【发布时间】：2017-11-19 17:35:12
【问题描述】：

我正在使用 Bootstrap，我想将图像居中，但我不知道该怎么做：/

这是 HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="./img/logo.png" /></a>
    </div>

所以我的导航栏上有一张图片，我想在 CSS 中尝试将其居中

.navbar-brand img{
        width: 83px;
        height: 57px;
        margin-left : 50%;
    }

图像根本不动

【问题讨论】：

标签： html css twitter-bootstrap center

【解决方案1】：

有很多方法可以做到这一点，你可以使用

text-align:center;

居中元素或

margin-left:auto; 
margin-right:auto;

这真的是基本的 CSS，你一定要先检查一下documentation。

【讨论】：

谢谢我忘了提及我的旧 CSS 代码，我尝试使用 text-align center 标签但它不起作用，margin-left|right 也是如此。我想这是因为 bootstrap 框架，所以我正在寻找使用 Bootstrap 的正确方法。
如果引导程序自动覆盖您的边距，请包含一个 !important 标记。
@Beben 您可以轻松覆盖引导程序，我认为您错过了一些 CSS 规则。
澄清：如果这只是针对特定网站或专有应用程序，则使用 !important 标签是理想的，因为它不会将您的 Bootstrap 从开发周期中删除，并且可以快速实施。如果这是您正在为其他开发人员开发的东西，例如 CMS 插件，您应该尝试找到一种方法来在引导程序的下游执行您的 CSS。修改 Bootstrap 应该作为最后的手段，因为它会将其从开发周期中移除。
@Nosajimiki 我不同意， !important 必须小心使用，因为它可以覆盖媒体查询中的 css，您可以避免使用 !important 通过使用与引导程序标签相同的 css 标签。

【解决方案2】：

试试这个：

.navbar-brand img{
    width: 83px;
    height: 57px;
    margin: 0 auto;
}

"margin-left:50%" 居中图像的左边界。 “边距：0 自动；”在我的元素的右侧和左侧说 put 和 equal 和最大边距。如果您需要顶部/底部的实际边距，您可以使用 4-property 方法，如下所示：

margin: 10px auto 20px auto;

【讨论】：