Vertical paragraphs using flexbox

Asked

Viewed 161 times

1

How do I position text two below text one?

.container { width : 100%; height: 150px; background-color: red; }
.vertical-align { display : flex; align-items: center; }
<div class="container vertical-align">
 <h2 class="txt-header--2">Texto one</h2>
 <p class="txt-indent--2">Texto dois</p>
</div>

css3

2 answers

1


Places Flex-Direction:column in the vertical-align class

A container display:Flex by default puts the child elements in line, because the flex-Direction standard is Row, but if you want the children to be below each other you have to manually set the Flex-director to column

  • I had already tried and without success because it loses the vertical alignment of the middle and the text of the left. I need you to stay on the left side and in the middle being vertical.

  • @Joãocarlos when changing the flex-Direction from Row to column vc changes the alignment axis, so beyond column vc you have to put Justify-content: center; and take the align-items to test

1

Places the property flex-direction: column in the div class that owns the property display: flex (in the case, .vertical-align) that it will behave as a column, and the elements will be below each other:

.container { width : 100%; height: 150px; background-color: red; }
.vertical-align { display : flex; align-items: center; flex-direction: column; }
<div class="container vertical-align">
 <h2 class="txt-header--2">Texto one</h2>
 <p class="txt-indent--2">Texto dois</p>
</div>

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.