bootstrap / center text vertically

Question

I am learning bootstrap 4 and therefore I try a small exemplary foto website.

First I would like to know if this is a good way. And more I got the problem that I cannot center the .text in their parent .img class.

Any hint for me?

Regards n00n

Your link doesn't work. Please add a minimum verifiable example.The community will be able to help you if we are able to see an example or a snippet of your code :) — Yash009, Mar 07 '19 at 19:01
Sorry, fixed the jsfiddle link and will check all answers, soon.... — n00n, Mar 08 '19 at 07:06

score 1 · Answer 1 · answered Mar 07 '19 at 19:59

Since you use Boostrap4, you may make this container a flex element too and use built-in classes d-flex align-items-center justify-content-center

https://getbootstrap.com/docs/4.3/utilities/flex/

demo

html,
body,
.containerWrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: red;
  margin: 0;
}

.containerWrap {
  display: flex;
  flex-flow: column nowrap;
  background-color: blue;
}

.defaultContainer {
  flex: none;
  background-color: black;
  color: white;
}

.centerContainer {
  flex: auto;
  background-color: yellow;
  overflow-y: auto;
}

.header {
  height: 95px;
}

.header .row .col {}

.footer {
  height: 65px;
}

.text-align-right {
  text-align: right;
}

.logo img {
  height: 85px;
}

.carousel-item .img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.carousel-item .img .text {
  color: #000;
  background-color: #FFC;
  vertical-align: middle;
  opacity: 0.8;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="containerWrap">
  <div class="header defaultContainer">
    <div class="container-fluid h-100">
      <div class="row h-100 align-items-end">
        <div class="col-4 logo">
          <img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png" />
        </div>
        <div class="col-2"></div>
        <div class="col-6 text-align-right">
          <a href="#">one</a>
          <a href="#">two</a>
          <a href="#">three</a>
          <a href="#">four</a>
          <a href="#">five</a>
        </div>
      </div>
    </div>
  </div>
  <div class="centerContainer h-100 bg-secondary text-white">





    <div id="carouselExampleControls" class="h-100 carousel slide" data-ride="carousel">
      <div class="carousel-inner h-100">
        <div class="carousel-item active h-100 ">
          <div class="img bg-info h-100 " style="background-image: url(test.jpg);">
            <div class="text h-100 d-flex align-items-center justify-content-center">first image</div>
          </div>
        </div>
        <div class="carousel-item h-100">
          <div class="img bg-warning h-100" style="background-image: url(test1.jpg);">
            <div class="text h-100 d-flex align-items-center justify-content-center">second image</div>
          </div>
        </div>
        <div class="carousel-item h-100">
          <div class="img bg-success h-100" style="background-image: url(test2.jpg);">
            <div class="text h-100 d-flex align-items-center justify-content-center">third image</div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>
  <div class="footer defaultContainer">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col-5 h-100 bg-success">left info</div>
        <div class="col-2 h-100 bg-warning"></div>
        <div class="col-5 h-100 bg-info text-align-right">right info</div>
      </div>
    </div>
  </div>

</div>

score 0 · Accepted Answer · answered Mar 07 '19 at 19:58

From the fiddle, it appears that by using flexbox justify-content:center and align-items:center on .carousel-item .img .text the text becomes centered. What this is doing is setting the div to be display: flex and centering the content both vertically and horizontally.

More on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body, .containerWrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.containerWrap {
 display:flex;
 flex-flow: column nowrap;
 background-color:blue;
}

.defaultContainer {
 flex:none;
 background-color:black;
 color:white;
}

.centerContainer {
 flex:auto;
 background-color:yellow;
 overflow-y: auto;
}

.header{
 height: 95px;
}

.header .row  .col{
 
}

.footer{
 height: 65px;
}

.text-align-right{
 text-align: right;
}

.logo img{
 height: 85px;
}
.carousel-item .img{ 
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 text-align: center;
}

.carousel-item .img .text{
 color: #000;
 background-color: #FFC; 
 vertical-align: middle;
 opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->

    <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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="styles.css" media="screen" />

    <title>Hello, world!</title>
  </head>
  <body>


 <div class="containerWrap">
   <div class="header defaultContainer">
    <div class="container-fluid h-100">
   <div class="row h-100 align-items-end">
    <div class="col-4 logo">
     <img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png"/>
    </div>
    <div class="col-2"></div>
    <div class="col-6 text-align-right">
     <a href="#">one</a>
     <a href="#">two</a>
     <a href="#">three</a>     
     <a href="#">four</a>
     <a href="#">five</a>
    </div>
   </div>
  </div>
   </div>
   <div class="centerContainer h-100 bg-secondary text-white">
  


<div id="carouselExampleControls" class="h-100 carousel slide" data-ride="carousel">
  <div class="carousel-inner h-100">
    <div class="carousel-item active h-100 ">
      <div class="img bg-info h-100 " style="background-image: url(test.jpg);">
  <div class="text h-100">first image</div>
   </div>
    </div>
    <div class="carousel-item h-100">
      <div class="img bg-warning h-100" style="background-image: url(test1.jpg);">
    <div class="text h-100">second image</div>
   </div>
    </div>
    <div class="carousel-item h-100">
      <div class="img bg-success h-100" style="background-image: url(test2.jpg);">
  <div class="text h-100">third image</div>
   </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

   </div>
   <div class="footer defaultContainer">
  <div class="container-fluid h-100">
   <div class="row h-100">
    <div class="col-5 h-100 bg-success">left info</div>
    <div class="col-2 h-100 bg-warning"></div>
    <div class="col-5 h-100 bg-info text-align-right">right info</div>
   </div>
  </div>
   </div>
   
 </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>

edit: this is easier to see when viewing the snippet in full page mode.

bootstrap / center text vertically

2 Answers2