2

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.

  • You can't center vertically if there is no height to your container. In your code, the container height is the `

    ` height

     – AymDev Feb 19 '17 at 09:58
  • so you want to columns? in the grid. one with the picture and one with the text? You're using bootstrap's `col-md-6` but you're not properly using a `container` or `row` css classes. refer to the grid system [here](http://getbootstrap.com/css/#grid) – Rico Kahler Feb 19 '17 at 10:02
  • Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – José Luis Feb 19 '17 at 10:11

2 Answers2

2

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>
AymDev
  • 6,626
  • 4
  • 29
  • 52
0

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.

user7381033
  • 21
  • 3