<分区>
html - css height, max-height, line-height VS.垂直对齐
请帮忙，这让我发疯!
我想我还是不明白属性之间的区别，例如:
高度最大高度行高
或者它们如何影响文本和图像的垂直对齐等属性。
我想要什么:
单行文本，垂直居中，内联图像大小不一，在一个 block 中粘在屏幕底部，基本上是这样的:
文本将始终小于单个“屏幕宽度”行，但图像高度可能会有所不同(大于和/或小于文本高度)。
我有什么:
- Note that the borders and background are only for demo purposes.
I only need the text & images in a transparent block, stuck to the bottom of the screen.
下面是我生成“我所拥有的”(上图)的代码。我尝试了无数令人沮丧的变体，但似乎离我想要的越来越远。
怎么可能这么多属性似乎什么都不影响？!(我认为我的错误是愚蠢和/或明显的!)
.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>最佳答案
尝试将文本放在 span 标签中，并使用 css 填充属性(padding/padding-top/padding-right 等)调整文本在 span 中的位置。
关于html - css height, max-height, line-height VS.垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55315656/