使用溢出隐藏时的垂直对齐答案

【问题标题】：Vertical alignment when using Overflow Hidden使用溢出隐藏时的垂直对齐
【发布时间】：2017-02-13 16:05:02
【问题描述】：

我没有运气尝试对齐某些文本。我在删除了溢出隐藏值的情况下进行了测试，但仍然无法让它看起来像我想要的那样。

这是一个 codepen 页面示例： http://codepen.io/anon/pen/oXrPGJ

HTML

<div>
 <article>
  <section>
   <h2 class="colourtitle">
    <img class="sideimage" src="http://placehold.it/256x256">
    I'm glad I wrap, wish I was vert mid
   </h2>
  </section>
 <article>
</div>

还有 CSS

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

h2 {
    padding-top: 1.5em !important;
    overflow: hidden !important;
}

.colourtitle {
    border-bottom-style: solid;
    border-bottom-color: red;
    border-bottom-width: 10px;
    padding: 5px 0 0 0;
}

.sideimage {
    display: inline-block;
    margin-right: 0.5em;
    max-width: 70px; 
    padding-top: 10px;
    border-right-style: solid;
    border-right-color: red;
    border-right-width: 10px;
    float: left;
}

我的页眉标签上有顶部填充，因为在我的实际页面上会有很多这样的堆叠，所以只是创建一个漂亮的空白。

我已将溢出设置为隐藏，这样当在移动屏幕上查看时，文本会按我的意愿换行，而不是位于图像下方。

h2 {
padding-top: 1.5em !important;
overflow: hidden !important;
}

您可以看到我正在使用一个拇指图像，它有一个右侧边框。连同一个 H2 标签，所有这些都使用底部边框。

但是，我希望文本稍微低一点，以便它垂直位于中间，但在小屏幕上需要时仍会进行换行。

我希望这很清楚，并且有人可以帮助我完成所需的代码片段。谢谢

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
抱歉 Paulie_D，我没有意识到这一点。我看到 Magnus 还善意地编辑了我的代码以包含它，所以我刚刚批准了它，以备将来如果 codepen 消失。再次感谢马格努斯

标签： html css vertical-alignment

【解决方案1】：

根据您的浏览器支持要求，您可以查看flexbox。

查看提供的链接和代码，您可以使用 display: flex 和 align-items: center 将文本垂直放置在中间。

.colourtitle {
  border-bottom-style: solid;
  border-bottom-color: red;
  border-bottom-width: 10px;
  padding: 5px 0 0 0;

  display: flex;
  align-items:center;
}

【讨论】：

谢谢马格努斯。这对我有用，只是添加了这两行 flexbox css 并在我的整个页面上进行了测试，并且很有效。