将文本底部与图像完全对齐

Question

我的图像显示在其侧面。问题是，较长的字母（例如，＆＃39; y＆＃39;）越过底部边距，因此，图像不与文本的整个底部对齐。这是描述问题的图像：

如何让文字与图像完全对齐？

JSFiddle

＆＃13;

＆＃13;

body {
  background-color: lightgreen;
}
#line {
  width: 100%;
  height: 1px;
  background-color: orange;
  position: absolute;
  top: 58px;
}
img {
  height: 50px;
}
#text {
  display: inline-block;
}

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Book_Hexagonal_Icon.svg/697px-Book_Hexagonal_Icon.svg.png" alt="">
<div id="text">My Texty</div>
<div id="line"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将vertical-align:bottom;添加到img：

＆＃13;

＆＃13;

body {
  background-color: lightgreen;
}
#line {
  width: 100%;
  height: 1px;
  background-color: orange;
  position: absolute;
  top: 58px;
}
img {
  height: 50px;
  vertical-align: bottom;
}
#text {
  display: inline-block;
}

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Book_Hexagonal_Icon.svg/697px-Book_Hexagonal_Icon.svg.png" alt="">
<div id="text">My Texty</div>
<div id="line"></div>

＆＃13;

＆＃13;

＆＃13;

默认情况下，内联和内联块元素与文本的基线垂直对齐。

通过将图片的vertical-align更改为bottom，您可以告诉它与文字的bottom对齐，而不是baseline < / p>

Answer 2

Flexbox使这很容易

＆＃13;

＆＃13;

body {
  background-color: lightgreen;
}
#line {
  width: 100%;
  height: 1px;
  background-color: orange;
  position: absolute;
  top: 58px;
}
img {
  height: 50px;
}
#text {
  /* display: inline-block; */
}
.container {
  display: flex;
  align-items: flex-end;
}

＆＃13;

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Book_Hexagonal_Icon.svg/697px-Book_Hexagonal_Icon.svg.png" alt="">
  <div id="text">My Texty</div>
  <div id="line"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要为texty设置底部填充和垂直对齐：

body {
  background-color: lightgreen;
}
#line {
  width: 100%;
  height: 1px;
  background-color: orange;
  position: absolute;
  top: 58px;
}
img {
  height: 50px;
}
#text {
  display: inline-block;
  vertical-align: text-bottom;
  padding-bottom: 3px;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Book_Hexagonal_Icon.svg/697px-Book_Hexagonal_Icon.svg.png" alt="">
<div id="text">My Texty</div>
<div id="line"></div>