如何通过基线垂直对齐文本和图像？

Question

我有文字和三张图像垂直对齐基线。我已经使用了vertical-align属性来按文本底部对齐项目，但它仍然没有正确对齐。

请参阅屏幕截图，透明黑匣子可帮助您查看基线问题。

＆＃13;

＆＃13;

.container {
  font-size: 16px;
}

.ayc_cooperation {
  margin: 0 5% 0 5%;
  font-size: 0.75rem;
  font-weight: 300;
  color: #535353;
}

.ayc_cooperation:before {
  content: "";
  display: table;
  clear: both;
}

.ayc_cooperation:after {
  content: "";
  display: block;
  height: 6.5rem;
}

.ayc_cooperation_ini_logo {
  float: left;
  width: 9.6875rem;
  height: 4.5rem;
}

.ayc_cooperation_ini_logo img {
  width: 100%;
  height: 100%;
}

.ayc_co_container {
  float: right;
  line-height: 8;
  height: 4.5rem;
}

.ayc_co_container img {
  max-width: 100%;
  max-height: 100%;
}

.ayc_co_container img:first-child {
  width: 7.5rem;
}

.ayc_co_container img:nth-child(2) {
  width: 8rem;
}

.ayc_co_container img {
  margin-right: 2.5rem;
}

.ayc_co {
  display: inline-block;
  margin-left: 2.5rem;
  font-size: 0.75rem;
  line-height: 14px;
  vertical-align: text-bottom;
}

.ayc_de_lebe_ev_img {
  width: 8rem;
}

.ayc_de_lebe_ev_img img {
  max-width: 100%;
  height: auto;
}

.ayc_de_lebe_img {
  width: 7.5rem;
}

.ayc_de_lebe_img img {
  max-width: 100%;
  height: auto;
}

.ayc_gilead_img {
  width: 6rem;
}

.ayc_gilead_img img {
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="container">
  <div class="ayc_co_container">
    <div class="ayc_co_text ayc_co">
      Eine Kooperation von:
    </div>
    <div class="ayc_de_lebe_img ayc_co">
      <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/deutsche-leberstiftung@3x.png" alt="Deutsche Leberstiftung">
    </div>
    <div class="ayc_de_lebe_ev_img ayc_co">
      <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/deutsche-leberhilfe-e-v@3x.png" alt="Deutsche Leberhilfe e.V">
    </div>
    <div class="ayc_gilead_img ayc_co">
      <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/gilead-sciences@3x.png" alt="Gilead Sciences GmbH">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

编辑答案/新发处：

这个特殊引用的问题在于你没有对齐文字，而是图像，并且在某些图像的底部边框上方有一些空白区域，这是图像的一部分，尤其是在“Deutsche Leberstiftung”中。 “ 图片。实际上，您要么必须编辑/剪切图像以获得所需的结果，要么使用position: relative并根据bottom设置来提升或降低它们，就像我在下面所做的那样片段 - 可能仍然没有完全对齐，但足以给你一个想法 - 你可以更改bottom值：

.container {
  font-size: 16px;
}

.ayc_cooperation {
  margin: 0 5% 0 5%;
  font-size: 0.75rem;
  font-weight: 300;
  color: #535353;
}

.ayc_cooperation:before {
  content: "";
  display: table;
  clear: both;
}

.ayc_cooperation:after {
  content: "";
  display: block;
  height: 6.5rem;
}

.ayc_cooperation_ini_logo {
  float: left;
  width: 9.6875rem;
  height: 4.5rem;
}

.ayc_cooperation_ini_logo img {
  width: 100%;
  height: 100%;
}

.ayc_co_container {
  float: right;
  line-height: 8;
  height: 4.5rem;
}

.ayc_co_container img {
  max-width: 100%;
  max-height: 100%;
}

.ayc_co_container img:first-child {
  width: 7.5rem;
}

.ayc_co_container img:nth-child(2) {
  width: 8rem;
}

.ayc_co_container img {
  margin-right: 2.5rem;
}

.ayc_co {
  display: inline-block;
  margin-left: 2.5rem;
  font-size: 0.75rem;
  line-height: 14px;
  vertical-align: text-bottom;
}

.ayc_de_lebe_ev_img {
  width: 8rem;
	position: relative;
	bottom: -2px;
}

.ayc_de_lebe_ev_img img {
  max-width: 100%;
  height: auto;
}

.ayc_de_lebe_img {
  width: 7.5rem;
	position: relative;
	bottom: -4px;
}
}

.ayc_de_lebe_img img {
  max-width: 100%;
  height: auto;
}

.ayc_gilead_img {
  width: 6rem;
	position: relative;
	bottom: 0px;
}

.ayc_gilead_img img {
  max-width: 100%;
  height: auto;
}

<div class="container">
  <div class="ayc_co_container">
    <div class="ayc_co_text ayc_co">
      Eine Kooperation von:
    </div>
    <div class="ayc_de_lebe_img ayc_co">
      <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/deutsche-leberstiftung@3x.png" alt="Deutsche Leberstiftung">
    </div>
    <div class="ayc_de_lebe_ev_img ayc_co">
      <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/deutsche-leberhilfe-e-v@3x.png" alt="Deutsche Leberhilfe e.V">
    </div>
    <div class="ayc_gilead_img ayc_co">
      <img src="http://presse.bist-du-chris.de/wp-content/themes/ayc_press/assets/media/img/gilead-sciences@3x.png" alt="Gilead Sciences GmbH">
    </div>
  </div>
</div>