Align text vertically in the middle

Question

I would like to know how I do so that the text that is next to the image is aligned vertically in the middle, so that it is more orderly next to the image that appears next to it. Starting the snippet, you can see what I say by clicking to see in full screen

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


            <section id="" class="ts-block ts-xs-text-center">
                <div class="container">
                    <!--end ts-title-->
                    <div class="row">
                            <div class="col-md-6" data-animate="ts-zoomIn" data-delay="0.1s">
                                <h4>Title</h4>
                                <p align="justify">Lorem Ipsum is simply dummy text of the printing and 
                                typesetting industry. Lorem Ipsum has been the industry's standard dummy
                                text ever since the 1500s, when an unknown printer took a galley of type 
                                and scrambled it to make a type specimen book. It has survived not only five
                                centuries, but also the leap into electronic typesetting, remaining essentially
                                unchanged.
                                </p>
                            </div>
                            <div class="col-md-6 text-center pb-5" data-animate="ts-fadeInUp" data-delay="0.1s">
                                <img src="https://conceptodefinicion.de/wp-content/uploads/2015/08/naturaleza-2-e1439386596208.jpg" class="img-fluid" alt=""/>
                            </div>
                    </div>
                </div>
            </section>

score 0 · Accepted Answer · answered Sep 05 '19 at 20:30

You can make the container div flexbox, and then you can use justify-content property to center the content. Like this:

.row .col-md-6:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<section id="" class="ts-block ts-xs-text-center">
  <div class="container">
    <!--end ts-title-->
    <div class="row">
      <div class="col-md-6" data-animate="ts-zoomIn" data-delay="0.1s">
        <h4>Title</h4>
        <p align="justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
      <div class="col-md-6 text-center pb-5" data-animate="ts-fadeInUp" data-delay="0.1s">
        <img src="https://conceptodefinicion.de/wp-content/uploads/2015/08/naturaleza-2-e1439386596208.jpg" class="img-fluid" alt="" />
      </div>
    </div>
  </div>
</section>

Align text vertically in the middle

1 Answers1