css高度，最大高度，线高VS. vertical-align [复制]

Question

这个问题在这里已有答案：

• How to Vertical align elements in a div? 28回答
• Vertical Aligned Text and Image in list 2回答

请帮忙，这让我抓狂！

我想我仍然不明白属性之间的区别如：

• height
• max-height
• line-height

或者它们如何影响文本和图像的垂直对齐等属性。

---

What I WANT:

单行文本，垂直居中，具有不同大小的内嵌图像，位于粘贴到屏幕底部的块中，基本上如下所示：

文本总是小于单个“屏幕宽度”线，但图像高度可能会有所不同（大于和/或小于文本高度）。

---

What I HAVE:

• 请注意，边框和背景仅用于演示目的。 我只需要透明块中的文本和图像，粘在屏幕的底部。

---

下面是我的代码，它产生了“我拥有的东西”（上图）。我尝试了无数令人沮丧的变化，似乎只是离我想要的更远。

怎么这么多属性似乎没有什么影响呢？！ （我认为我的错误是愚蠢和/或显而易见的！）

.page-container {
  position: absolute;
  /* does nothing?! */
  height: 100%;
}

.txt-img-container {
  background-color: lightgreen;
  border: dotted 5px green;
  width: 100%;
  position: sticky;
  /* does nothing?! */
  bottom: 0px;
  /* does nothing?! */
  vertical-align: middle;
  /* does nothing?! */
  min-height: 300px;
  /* does nothing?! */
  line-height: 300px;
  /* does nothing?! */
  height: 300px;
  /* does nothing?! */
}

.img-container {
  border: dashed 5px red;
  vertical-align: middle;
  /* does nothing?! */
  min-height: 300px;
  /* does nothing?! */
  line-height: 300px;
  /* does nothing?! */
  height: 300px;
  /* does nothing?! */
}

<div class="page-container">
  <div class="txt-img-container">
    This text && various imgs . . .
    <span class="img-container">
    				<img src="https://placehold.it/50?text=50"/> 
    			</span> . . . should all be centered vertically . . .
    <span class="img-container">
    				<img src="https://placehold.it/100?text=100"/> 
    			</span> . . . within the green 300px div.
  </div>
</div>

Answer 1

尝试将文本放在span标签中，并使用css填充属性（padding / padding-top / padding-right etc ..）调整跨度内的文本位置。