如何将标题与图像顶部对齐(行高问题)
如何将标题与图像顶部对齐(行高问题)
提问于 2018-05-31 07:37:38
我有一个2列的布局，其中在左列是一个标题，在右列是一个图像。我希望标题和图像在顶部对齐，如下所示：
现在，我通过设置h1 { line-height: 1em; }实现了这一点。但是，如果行高较大，并且标题覆盖了更多行，我也希望它可以工作，如下面的代码示例所示：
body {
max-width: 400px;
}
div {
float: left;
width: 50%;
}
h1 {
margin: 0;
padding: 0;
line-height: 2em;
}
img {
width: 100%;
}<div>
<h1>Hello world!
<br>Foo Bar Baz</h1>
</div>
<div>
<img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
我不想使用负边距，因为左栏稍后将填充CMS内容。我不能控制什么元素(h1-h6，p，等等)将在那里显示，以及该元素的行高。
回答 2
Stack Overflow用户
发布于 2018-05-31 08:01:42
您可以始终使用良好的旧vertical-align属性。不过，这一直是一个棘手的属性。
例如，在您的示例中，我必须将两个display属性都设为inline-block，因为您需要元素是内联的，以便可以垂直对齐。
此外，我还必须将一个div的结束标记放在下一个div的开头，因为显示它们的inline会将代码中的新行呈现为一个空格，从而使第二个div落到一个新行。
body {
max-width: 400px;
}
div {
width: 50%;
display:inline-block;
vertical-align:middle;
}
h1 {
margin: 0;
padding: 0;
line-height: 2em;
}
img {
width: 100%;
} <div >
<h1>Hello world!
<br>Foo Bar Baz</h1>
</div><div class="leDiv">
<img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
Stack Overflow用户
发布于 2018-05-31 07:48:09
这是在CSS中使用flexbox布局的绝佳时机。
使用flexbox可以很容易地对齐内容，而不必设置任何特定的高度-因为您可以让元素的高度与其兄弟元素的高度相同。
我已经创建了一个对您的代码做了一些小改动的快速演示，我相信它会产生您所希望的结果：
body {
max-width: 400px;
}
h1 {
margin: 0;
padding: 0;
line-height: 2em;
}
img {
width: 50%;
}
.flex-container {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}<div class="flex-container">
<h1>Hello world!
<br>Foo Bar Baz</h1>
<img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
<hr>
<div class="flex-container">
<h2>Hello world!
<br>Foo Bar Baz Longer example with h2</h2>
<img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
有关flexbox的更多信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50614704
复制相关文章
相似问题
腾讯云开发者
