并排的div表现奇怪[重复]答案

【问题标题】：Side by side divs behave strange [duplicate]并排的div表现奇怪[重复]
【发布时间】：2019-09-21 13:18:28
【问题描述】：

我有这个：

.themeMenu {
  width: 100%;
  height: 10%;
  border: 0px;
  overflow: hidden;
  background-color: yellow;
}

.Preview {
  display: inline-block;
  height: 100%;
  width: 15%;
  background-color: red;
  margin-left: 2%;
}

.mag {
  display: inline-block;
  height: 100%;
  width: 15%;
  background-color: green;
}

.themeTitle {
  display: inline-block;
  height: 100%;
  width: 20%;
  background-color: green;
  text-align: left;
}

<div class="themeMenu">
  <div class="preview"></div>
  <div class="mag"></div>
  <div class="themeTitle">text here ruin it</div>
</div>

问题：当我不将文本放入 themeTitle 时，它向右对齐就好了，但是如果我在这个 div 中放入一个字母，所有字母都会向下，所以 preview/mag 垂直对齐但 @987654326 @ 下跌降落。

编辑：

`vertical-align:top;`

将themeTitle与预览/mag放在相同的高度，但文本将在顶部，我需要将它们全部垂直对齐到中心：

(预览|杂志|主题标题)

【问题讨论】：

在 stackblitz.com 上做一个演示
我猜这是默认的基线对齐方式 - 请参阅stackoverflow.com/questions/41375341

标签： html css

【解决方案1】：

用 vertical-align:top; 解决它，但是文本仍然在顶部，所以在里面添加了一个新的 h1 ：

  <div class="themeTitle"> <h1 class="fontRoundedText">ff</h1> </div>

然后在这个 h1 上，

.themeTitle>h1
{
  vertical-align: center ;
  font-size: 100%;
}

【讨论】：

【解决方案2】：

试试这个，只需插入换行符

<div class="themeMenu">
  <div class="preview"></div><br>
  <div class="mag"></div><br>
  <div class="themeTitle">text here ruin it</div>
</div>

【讨论】：