CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7454355
user7454355

Reputation:

text does not vertically align with image

Good day, as the title says, I am having issues with aligning the text in the exact center of my image. I tried adding a class with the css vertical-align:middle with no effect. Also, I tried using the span class to surround the text that will be centered. Both the image and the text are encased in a bootstrap grid. Any help will be appreciated thank you.

the current situation

HTML/Bootstrap: 

   <div class="container-fluid">
      <div class="row">
          <div class="col-md-3">
            <img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
          </div>
          <div class="col-md-9 justify_text">
            <span>
            <h2 class="med_bg">OUR MISSION</h2>
            <p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
            </span>
          </div>
      </div>
   </div>

CSS:

.align_text {
  vertical-align: middle;
}

Upvotes: 1

Views: 215

Answers (3)

Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

You can aslo use align-self-center in column div class without any height of image and other css also add larger image no design change when you use align-self-center in column div no need set image height

.align_text {
  vertical-align: middle;
}
img {
  max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
      <div class="row">
          <div class="col-md-3">
            <img src="http://placekitten.com/1000/500" class="img-responsive align_text">
          </div>
          <div class="col-md-9 justify_text align-self-center">
            <span>
            <h2 class="med_bg">OUR MISSION</h2>
            <p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
            </span>
          </div>
      </div>
   </div>

Upvotes: 0

Girisha C
Girisha C

Reputation: 1950

Considering you are using bootstrap4, you can achieve that using the class .align-items-center, or use display:flex as stated by others :)

img {
  background: gray;
  height: 250px;
  display: block;
  max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row align-items-center">
    <div class="col-3">
      <img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
    </div>
    <div class="col-9 justify_text">
      <h2 class="med_bg">OUR MISSION</h2>
      <p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and
        friendly access to health, wellness and beauty.”</p>
    </div>
  </div>
</div>

Upvotes: 1

Gerard
Gerard

Reputation: 15786

I believe this produces what you ask for. It is using 2 flexboxes:

  1. First one (.row) to put the image and text next to each other in a responsive way;
  2. Second one (.col-md-9) to position the span in the center

html,
body {
  width: 100%;
}

.row {
  display: flex;
  width: 100%;
}

.row>* {
  flex: 1; /* Allow the flex items to grow and shrink */
}

.col-md-9 {
  display: flex;
  justify-content: center;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <img src="https://via.placeholder.com/100x300" class="img-responsive align_text">
    </div>
    <div class="col-md-9">
      <span>
            <h2 class="med_bg">OUR MISSION</h2>
            <p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
            </span>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions