使用“溢出隐藏”时垂直对齐

时间:2015-08-21 14:50:12

标签: html css vertical-alignment

我没有运气试图调整一些文字。 我测试了溢出隐藏值被删除但仍然无法看到我想要的。

这是一个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标签一起使用底部边框。

但是,我希望文本稍微低一些,以便它在垂直方向位于中间,但在小屏幕上需要时仍然会进行包装。

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

1 个答案:

答案 0 :(得分:5)

根据您的浏览器支持要求,您可以查看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;
}