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

Question

我没有运气试图调整一些文字.我测试了溢出隐藏值删除但仍然无法让它看起来我想要的.

这是一个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;
}

我的标题标签上有Top Padding,因为在我的实际页面上会有很多堆叠,所以只需创建一个漂亮的空白区域.

我已设置隐藏溢出,因此当在移动屏幕上查看时,文本会按照我的意愿进行包装,并且不会位于图像下方.

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

你可以看到我正在使用拇指图像,它有一个右侧边框.连同H2标签,这都是使用底边边框.

但是,我希望文本稍微低一点,以便它在垂直中间位置,但在小屏幕上需要时仍然可以进行包装.

我希望这很清楚,有人可以帮我解决所需的代码.谢谢

Answer 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;
}