从昨天开始我就一直在寻找关于这个问题的答案，但找不到答案。我需要 Bootstrap 中超大屏幕中心的文本。
<!DOCTYPE html>
<html>
<head>
<title>Lorem Ipsum</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg" style="width:140px;"></a>
<ul class="nav justify-content-center ">
<li class="nav-item">
<a class="nav-link active" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem Ipsum</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-dark" href="#">Login / Signup</button></a>
</li>
</ul>
</nav>
<div class="vertical-center header position-relative section-hero text-center container-fluid bg-light">
<div class="container-fluid">
<img class="overlay container-fluid img-responsive" src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg">
</div>
<div class="container carousel-caption">
<h1 class="display-4">Lorem Ipsum</h1>
<p class="lead text-center">Vexillologist dolor edison bulb affogato authentic. Veniam microdosing seitan, vexillologist mollit jianbing dolore tempor man braid cliche street art hoodie tote bag. Occupy deep v typewriter incididunt microdosing seitan jean shorts vape vexillologist scenester. </p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
编辑: 这是完整的代码。我不确定我是否应该如何将文字放在照片中间。我还需要屏幕右下角的文本以获取 CTA。
最佳答案
您可以使用 position:absolute;transform: translate(-50%, -50%); 属性来做到这一点。确保父级是相对
.content-holder {
position: absolute;
left: 50%!important;
z-index: 10;
color: #fff;
text-align: center;
top: 50%!important;
transform: translate(-50%, -50%);
width: fit-content;
padding: 50px
}<!DOCTYPE html>
<html>
<head>
<title>Lorem Ipsum</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="position-relative">
<img src="https://slidesjs.com/examples/standard/img/example-slide-1.jpg" width="100%">
<div class="content-holder">
<h1 class="display-4">Lorem Ipsum</h1>
<p class=" text-center">Vexillologist dolor edison bulb affogato authentic. Veniam microdosing seitan, vexillologist mollit jianbing dolore tempor man braid cliche street art hoodie tote bag. Occupy deep v typewriter incididunt microdosing seitan jean shorts vape vexillologist
scenester. </p>
</div>
</div>
</body>
</html>关于html - 如何将带有照片的超大屏幕中央的文本居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57159445/