html - 如何在引导程序中将徽标图像、电话、位置放在导航栏上方？

Question

我是 Bootstrap 的新手：我想在导航上方放置徽标图像、带有地址的位置图像、带有文本的电话号码。徽标细节应居中。我试过的：

    <header >
            
        <div class="container ">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <img class="img-fluid" style="max-width: 50%;" src="images/logo.png" alt="logo">
                    <img class="img-fluid" style="max-width: 5%" src="images/header-address.png" alt="logo">
                 <span class="span-text">1234 Abcd Efg  <br> HI jk Lm,123466 </span> 
                 <img class="img-fluid" style="max-width: 5%;" src="images/header-phone.png" alt="logo">
                <span class="span_text">[phone] <br> Call Us </span> 
                </div>
                <div class="col-md-6">
                    
                </div>
            </div>

            </div>  
            </header>
        
        <section >
            <div class="container mx-auto">
                <div class="row">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">GALLERY</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT US</a>
        </li>     
        
      </ul>
      
    </div>
  </div>
</nav></div>
            </div>
        </section>

未实现徽标、位置和电话号码的对齐。
如何解决这个问题？

标签： htmlcssclassbootstrap-4navigation

Answer 1

用于margin: 0 auto;_.col-md-6

.col-md-6 {
    flex: 0 0 auto;
    width: 50%;
    text-align: center;
}

如果您还想将导航项居中，请添加以下内容：

.navbar-expand-lg .navbar-nav {
    flex-direction: row;
    margin: 0 auto;
}

---

顶部电话号码...居中：

---

导航项目居中：

---

都以文本对齐为中心