Question

我有这个：

.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是垂直的对齐，但themTitle下降。

编辑：

`vertical-align:top;`

会将themeTitle与Preview / mag放置在相同的高度，但是文本将位于顶部，我需要将它们全部垂直居中对齐：

（预览| mag | themeTitle ）

Answer 1

用：vertical-align:top;解决，但文本仍在顶部，因此在其中添加了新的h1：

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

然后在此h1上，

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

Answer 2

尝试一下，只需插入换行符

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

并排div行为异常

2 个答案: