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

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

1 个答案: