Vertically align multi-paragraph text within a div

Asked Apr 19 '18 at 13:51

Active Apr 19 '18 at 13:52

Viewed 23 times

I want to align multi-paragraph of text vertically within a div. Here are my codes.

HTML

<div class="valign">
    <h3>Title of the paragraph</h3>
    <p>Lorem ipsum</p>
    <p>Next paragraph</p>
</div>

CSS

.valign {
    display: flex;
    align-items: center;
    height: 200px;
}

But it doesn't work. Your solution is welcome.

edited Apr 19 '18 at 13:52

asked Apr 19 '18 at 13:51

Heri

set direction to column ? – Temani Afif Apr 19 '18 at 13:51
no, from top to bottom not like a column – Heri Apr 19 '18 at 13:55
so set direction to column – Temani Afif Apr 19 '18 at 13:55
https://jsfiddle.net/td24wq8h/4/ – Temani Afif Apr 19 '18 at 13:56
and please take the time to read this answer : https://stackoverflow.com/a/33049198/8620333 – Temani Afif Apr 19 '18 at 13:58
That doesn't work. That you for the link but it's not the same. – Heri Apr 19 '18 at 13:58
what is not working ? in the code I provided, the text in centred vertically and horizontally within the div – Temani Afif Apr 19 '18 at 13:59
In fact, it doesn't look like what i'am expecting. I would like to get rid of the big line-spacing between the paragraph. – Heri Apr 19 '18 at 14:06
this is called margin, so remove margin from p and h3 – Temani Afif Apr 19 '18 at 14:07
Oh i see, thank you @Temani Afif – Heri Apr 19 '18 at 14:10

0 Answers0