How to vertically align paragraph inside div

Question

http://www.gabrielleelizabethstudios.com/GEA_html/thejustingallery.html

I'm having trouble getting this to vertically align automatically. I know I can add a padding-bottom to center it manually, but I'd rather it position vertically automatically. How would I go about doing this? And I need to keep the display: inline-block functionality.

<div style="width:375px; height 250px; display: inline-block; margin:10px; padding: 0;text-align: center;">          
                <p>title</br></br>     
            text for paragraph goes here</p>
</div>

Also have a look at: [How to align text vertically center in div with css?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css?rq=1). — Hashem Qolami, Sep 21 '14 at 21:36

Farshad · Accepted Answer · 2014-09-21T21:37:39.377

2

you must set vertical-align: middle; to .masonry .item { class

.masonry .item {
    height: 250px;
    margin: 10px;
    display: inline-block;
    vertical-align: middle;
    }

and add vertical-align: middle; to parent div of the p element

<div style="width: 375px; display: inline-block; margin: 10px; padding: 0px; text-align: center; vertical-align: middle;">

edited Sep 21 '14 at 21:37

answered Sep 21 '14 at 21:26

Farshad

1,435
1
8
12

Worked perfectly, would have never have guessed to do that. Thanks so much! – Sep 21 '14 at 21:46
you're welcome @JustinMerriman – Farshad Sep 21 '14 at 21:47

score -6 · Answer 2 · answered Sep 21 '14 at 21:27

-6

You could use a CSS class for your paragraph tags, something like this:

.p {
    padding-left:40px;
}

answered Sep 21 '14 at 21:27

CH3M

65
7

How to vertically align paragraph inside div

2 Answers2