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

Question

我在尝试对齐某些文本时遇到了麻烦。我在删除了 Overflow Hidden 值的情况下进行了测试，但仍然无法让它看起来像我想要的那样。

这是一个代码笔页面示例： 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;
}

我的页眉标签上有 Top Padding，因为在我的实际页面上会有很多这样的堆叠，所以只创建一个漂亮的白色 space。

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

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

您可以看到我使用的是缩略图，它有一个右侧边框。连同 H2 标签，这一切都使用了底边边框。

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

我希望这很清楚，并且有人可以帮我解决需要的代码片段。谢谢

Answer 1

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

查看提供的 link 和代码，您可以使用 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;
}

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

Vertical alignment when using Overflow Hidden

html

css

vertical-alignment