在div内垂直对齐左右文本

Question

我正在尝试创建一个标题并将一个文本左对齐，另一个向右对齐，我想知道除了line-height之外还有另一种方式来实现这一目标吗？

.popular {
  margin-left: 15px;
  float: left;
}
.popular-day {
  margin-right: 15px;
  float: right
}
.menu-headline {
  height: 100px;
  outline: 1px solid black;  
  width: 500px;
  text-align: middle;
}

<div class='menu-headline'>
  <p class='popular'>Popular</p>
  <p class='popular-day'>Today</p>
</div>

Answer 1

可以使用 flexbox 轻松完成。

.menu-headline {
  outline: 1px solid black; 
  width: 500px;
  height: 100px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class='menu-headline'>
  <p class='popular'>Popular</p>
  <p class='popular-day'>Today</p>
</div>

或使用CSS表来支持旧IE。

.menu-headline {
  outline: 1px solid black; 
  width: 500px;
  height: 100px;
  display: table;
}
.menu-headline > p {
  display: table-cell;
  vertical-align: middle;
  padding: 0 15px;
}
.popular-day {
  text-align: right;
}

<div class='menu-headline'>
  <p class='popular'>Popular</p>
  <p class='popular-day'>Today</p>
</div>