CODEWITHSUNDEEP
htmlcsscss-positionpositioning
user4490434
user4490434

Reputation:

Can't vertically center a paragraph inside a div

I've got a container div with a paragraph and another div which contains an image. Both the paragraph and the div are inline. I can't figure out how to vertically center the paragraph. I've tried using vertical-align: middle but it didn't do much.

Upvotes: 2

Views: 1826

Answers (2)

AymDev
AymDev

Reputation: 7609

You need to set a height to your container (as I told you in comments).
And here is a method (among others) to vertically center with flex properties, no matter the container height.

.col-md-6 {
    height: 500px;
    // The container must be flexible
    display: flex;
}

.historic-story {
    font-size: 25px;
    text-align: center;
    // This is the property which centers
    align-self: center;
  }
<div id="historic-container" class="col-md-12">
  <div class="col-md-6">
    <p class="historic-story"><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo in tellus ut varius. Etiam posuere ultricies maximus. Donec non turpis dolor. Donec erat nulla, mollis sit amet consectetur in, tempus vitae urna. Quisque elementum in felis eget pretium. Phasellus ultrices ligula ut consequat efficitur.</i></p>
  </div>
  <div class="col-md-6 historic-img-container">
    <img src="//cdn.shopify.com/s/files/1/1698/6183/t/5/assets/historic1.jpg?11742577354521181346" alt="">
  </div>
</div>

Upvotes: 2

user7381033
user7381033

Reputation: 21

Forget the margins. That will only work horizontal. Set the top and bottom padding of your #historic-container to equal each other. Try 10% top and bottom padding. Forget the vertical align too.

Upvotes: 0

Related Questions