How do I center a text in the middle of a jumbotron with a photo?

1
votes

I've been searching for answers since yesterday about this but couldn't find an answer. I need the text in the center of a jumbotron in 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>

Edited: This is the complete code. I'm not sure if I should how to put the text in the middle of the photo. I also need a text at the lower right of the screen for a CTA.

2
htmlcssbootstrap-4

2 Answers

0
votes

Hi the vertical align doesn't work because the .carousel-caption has a property bottom: 20px, which means it will put the container 20px from bottom. If you want to fix it you need to add a class to this element 

.some-class {
     bottom: 50%; /* it will put 50% from the bottom */
     transform: translateY(50%); /* which will put the anchor point to the center of the div */
}

I hope I understood your question right.

0
votes

You can do that using position:absolute;transform: translate(-50%, -50%); property. Make sure that parent is relative

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