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