Vertical align elements displayed as block inside of div

Question

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?

@DanielBeck text is aligned to the top of the row, not centered to the middle. — Suule, Jan 27 '19 at 19:36

score 1 · Accepted Answer · answered Jan 27 '19 at 19:41

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>

Vertical align elements displayed as block inside of div

1 Answers1