垂直对齐元素在div内部显示为块

Question

我在将文本对齐到中心时遇到一些问题：

.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>

我想要实现的是获取名称和消息的列表，其中每个名称和消息都在一行中。但是目前，我在尝试将文本对齐的地方行不通。有什么想法吗？

Answer 1

您可以使用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>