Vertical align elements displayed as block inside of div [duplicate] - html

Question

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
I have some problems with aligning text to the center:
.list {
width: 100%;
height: 100%;
}
.row {
vertical-align: middle;
width: 100%;
height: 30px;
text-align: center;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>
What I would like to achieve is to get list of names and messages, where each name and message are in one row. But currently, where I am trying to align text in row it doesn't work. Any ideas?

Answer 1

You can do this with display:flex:
.list {
width: 100%;
height: 100%;
}
.row {
display: flex;
justify-content: center;
align-items: center;
text-align:center;
width: 100%;
height: 30px;
}
.name {
display: block;
float: left;
width: 30%;
}
.message {
display: block;
float: left;
width: 70%;
}
<div class="list">
<div class="row">
<div class="name">Ben</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">Tom</div>
<div class="message">Hello world</div>
</div>
<div class="row">
<div class="name">NoName</div>
<div class="message">Hello world</div>
</div>