当我还需要内联显示时，如何垂直对齐此文本？

Question

我试图使用可折叠的div在我的短篇小说中为章节制作标题。我使用两种不同的字体/样式和三层div来使它看起来像我想要的那样。不幸的是，文字是几个像素太低，当我看到它时会伤到我的眼睛。

我知道内联显示器并不真正允许垂直对齐（我的填充被忽略）。我尝试使用＆＃34; inline-block＆＃34;无济于事。我尝试在左边填充顶部＆＃34;＆gt;＆＃34;符号，但这使整个建筑向下移动。在过去的两个小时里，我一直在抨击这件事，我放弃了：D。

这是我的HTML标记以及CSS。

<div class="ShortStoryHeaderDiv" onclick="toggleContentDiv('h1','c1');">
  <div class="ShortStoryHeaderCenterDiv">
    <div id="h1L" class="ShortStoryHeaderDivLeft">&gt;</div>
    <div class="ShortStoryHeaderText">Must... align... text</div>
    <div id="h1R" class="ShortStoryHeaderDivRight">&lt;</div>
  </div>
</div>

CSS：

.ShortStoryHeaderDiv
{
  margin-top: 1em;
  margin-bottom: 1em;
  width: 100%;
  height: 3em;
  text-align: center;
  background-color: #DDD;
  cursor: pointer;
}

.ShortStoryHeaderCenterDiv
{
  padding-top:0.2em;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.ShortStoryHeaderDivLeft
{
  display:inline-block;
  padding-right: 3em;

  font-family: Verdana;
  font-weight: bold;
  text-shadow: 0 0 4px #555;
  color: #000;
  font-size: 17pt;
}

.ShortStoryHeaderDivRight
{
  display:inline-block;
  padding-left: 3em;

  font-family: Verdana;
  font-weight: bold;
  text-shadow: 0 0 4px #555;
  color: #000;
  font-size: 17pt;
}

.ShortStoryHeaderText
{
  display:inline;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5em;
  text-align: center;
  text-decoration: underline;
  color: #00F;
}

Answer 1

您可以尝试将display:table-cell用于vertically-align:middle

或设置高度，然后将线高设置为相同。

e.g。 height: 40px; line-height:40px;

Answer 2

通过在ShortStoryHeaderText CSS类中使用它来管理它使它工作，感谢SkelDave提醒我垂直对齐。一旦指定了vertical-align：top，填充顶部才开始工作是很尴尬的。否则会被忽略。

  display:inline-block;
  padding-top:3px;
  vertical-align:top;