我没有运气试图调整一些文字。 我测试了溢出隐藏值被删除但仍然无法看到我想要的。
这是一个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标签一起使用底部边框。
但是,我希望文本稍微低一些,以便它在垂直方向位于中间,但在小屏幕上需要时仍然会进行包装。
我希望很清楚,有人可以帮我解决所需的代码。感谢
答案 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;
}