Question

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

我尝试使用.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

有多种垂直对齐方式。

您可以通过绝对指定位置，使父div位置相对。

以下是代码：-

let destination: DownloadRequest.Destination = { _, _ in
            var documentsURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
            return (documentsURL, [.removePreviousFile])
        }

let request = AF.download("http://someurl.com", to: destination)

request
    .response(completionHandler: { (response) in
         //handle response data
      })

Answer 2

根据我的理解，您想将a标签对准<div class="banner-logo"></div>内部的垂直和水平中心。为此，您可以对包含mx-auto标记

的my-auto使用引导4类<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>

Answer 3

您可以跳过此修复程序的mx-auto和my-auto，文本中心和填充将为您完成工作。检查此解决方案，这很简单。希望对您有帮助

.banner-logo{
  background-color: red;
  padding: 10px 0;
}

a.brand-text{
  text-decoration: none;
  color: white;
  font-size: 20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
 <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>
</body>
</html>

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

3 个答案: