html - 如何在导航栏内的列内的Bootstrap 3中对齐图像中心？

Question

因此，我试图在页面的导航栏中的列之一中居中显示图像。无论我尝试过什么，都无法使它居中对齐。

我尝试了margin：0 auto，并为img指定了一个额外的类。我也尝试过使用col-lg-push *，但这似乎无济于事。

以下是我的导航条形码：

        <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 padding-t45 fbold">
                    Enquire now<br />
                    T: 020 4567 7890
                </div>
                <div class="col-lg-4">
                        <a class="navbar-brand" href="#"><img alt="Logo" src="logo.png" class="img-responsive" /></a>
                </div>
                <div class="col-lg-4 text-right padding-t45">
                        <span class="fab fa-facebook-f" style="font-size:25px; padding-right:20px"></span>
                        <span class="fab fa-twitter" style="font-size:25px; padding-right:20px"></span>
                        <span class="fab fa-instagram" style="font-size:25px; padding-right:20px"></span>
                    <span class="fas fa-bars" style="font-size: 25px;"></span>
                    <p class="fbold">A venue for every event</p>
                </div>
            </div>

Answer 1

在引导程序中，选择器img-responsive使img元素display:block。您只需要摆脱它，并将text-align:center分配给它的父元素。试试这个代码。

.navbar-brand {
  display: block;
  float: none !important;
  text-align: center;
}

.navbar-brand img.img-responsive {
  display: inline-block !important;
}