首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将标题与图像顶部对齐(行高问题)

如何将标题与图像顶部对齐(行高问题)
EN

Stack Overflow用户
提问于 2018-05-31 07:37:38
回答 2查看 83关注 0票数 -1

我有一个2列的布局,其中在左列是一个标题,在右列是一个图像。我希望标题和图像在顶部对齐,如下所示:

现在,我通过设置h1 { line-height: 1em; }实现了这一点。但是,如果行高较大,并且标题覆盖了更多行,我也希望它可以工作,如下面的代码示例所示:

代码语言:javascript
复制
body {
max-width: 400px;
}

div {
  float: left;
  width: 50%;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 100%;
}
代码语言:javascript
复制
<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,等等)将在那里显示,以及该元素的行高。

EN

回答 2

Stack Overflow用户

发布于 2018-05-31 08:01:42

您可以始终使用良好的旧vertical-align属性。不过,这一直是一个棘手的属性。

例如,在您的示例中,我必须将两个display属性都设为inline-block,因为您需要元素是内联的,以便可以垂直对齐。

此外,我还必须将一个div的结束标记放在下一个div的开头,因为显示它们的inline会将代码中的新行呈现为一个空格,从而使第二个div落到一个新行。

代码语言:javascript
复制
body {
max-width: 400px;
}

div {
  width: 50%;
  display:inline-block;
  vertical-align:middle;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 100%;
}
代码语言:javascript
复制
    <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>

票数 0
EN

Stack Overflow用户

发布于 2018-05-31 07:48:09

这是在CSS中使用flexbox布局的绝佳时机。

使用flexbox可以很容易地对齐内容,而不必设置任何特定的高度-因为您可以让元素的高度与其兄弟元素的高度相同。

我已经创建了一个对您的代码做了一些小改动的快速演示,我相信它会产生您所希望的结果:

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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/

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50614704

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档