如何在導航欄中的列內的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;
}