0

I tried to use vertical align in another div. I know that if you want to vertical align you must at least have an image and span in one div. but what if I want to use it when my image and h4 in a different div? Is there any way to use it like that?

this is my example code (I'm using bootstrap for row and col):

  <div id="paham-quotes" class="card">
    <div class="card-body">
      <div class="row">
        <div class="col quotes-img">
          <img
            src="../assets/dashboard/nelson-mandela.png"
            alt="nelson-mandela"
          />
        </div>

        <div class="col quotes-caption">
          <h4 class="card-title">
            “Education is the most powerful weapon which you can use to change
            the world.”
          </h4>
          <h5 class="card-text">
            Nelson Mandela
          </h5>
          <h5 class="card-text">
            Ex president of south africa
          </h5>
        </div>
      </div>
    </div>
  </div>

this is my css code:

#paham-quotes{
    font-family: 'Nunito', sans-serif;
    max-width: 1200px;
    margin: 0% auto;
    border: none;
}

#paham-quotes .quotes-img > img{
    text-align: center;
    width: 250px;
    height: auto;
}

#paham-quotes .quotes-caption{
    color: #1D3962;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    padding-right: 100px;
}

#paham-quotes .quotes-caption h4{
    font-size: 1.4em;
    font-style: italic;
}

can someone help me solved this? Some of topic that I read is pointing in the same div like this:

vertically-align-text-next-to-an-image

image-and-text-next-to-each-other-and-in-the-middle-of-the-div

Rakish Frisky
  • 665
  • 7
  • 23

1 Answers1

1

You can do it by adding flex classes in row if you are using bootstrap 4::

<div class="row align-items-center"></div>
Sonia
  • 1,909
  • 1
  • 11
  • 13