html - Bootstrap 4在div的绝对中心对齐<a>标签

Question

我对 Bootstrap 完全陌生。 我在对齐 <a> 时遇到严重问题标签位于 div 的垂直和水平中间。

我尝试使用 .mx-auto , margin: 0 auto以及我所知道的其他常用方法。我这里的选项已经用完了。

任何人都可以给我建议吗？

这是一个fiddle对于我的代码

.bg-banner {
  background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 20vh;
}

.banner-logo {

  background-color: red;
  height: 20vh;
}
 .brand-text{
    font-size: 2em;
    color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <header>
      <div class="container-fluid">
         <div class="row">
           <div class="col-md-3 banner-logo text-center">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>

Answer 1

根据我的理解，你想要对齐 a标记到内部垂直和水平中心 <div class="banner-logo"></div> 。为此，您可以使用 bootstrap 4 类 mx-auto和my-auto对于<div>包裹 <a>标签

.banner-logo{
background-color:red;
padding:20px
}
a.brand-text{
text-decoration:none;
color:white;
font-size:20px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <header>
      <div class="container-fluid">
         <div class="row">
           <div class="col-md-3 banner-logo text-center mx-auto my-auto">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>