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

Dunit 发表于 Dev

邓恩

我是Bootstrap的新手。在<a>div的垂直和水平中间对齐标签时遇到严重问题。

我试着使用.mx-auto，margin: 0 auto以及其他常用的方法，我知道的。我在这里没空了。

谁能给我建议。

这是我的代码的小提琴

.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>

西马诺伊

根据我的理解，您想将a标签对齐到内部的垂直和水平中心<div class="banner-logo"></div>。为此，您可以使用bootstrap 4类，mx-auto而my-auto对于<div>wraps<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。