CSS高度，最大高度，行高VS。垂直对齐

Question

请帮助，这使我发疯！

我猜我仍然不了解以下属性之间的区别：

• height
• max-height
• line-height

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

---

我想要的是

一行文本，垂直居中放置不同大小的内联图像，在屏幕底部中，基本上像这样：

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

---

我所拥有的：

  

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

---

下面是我的代码，产生了“我有什么” （上图）。我已经尝试了无数令人沮丧的变化，但似乎离我想要的东西越来越远。

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

.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 / padding-top / padding-right等。）来调整文本在span中的位置。