2

Please Help, this is driving me crazy!

I guess I still don't understand the difference between attributes like:

  • height
  • max-height
  • line-height

or how they affect properties like the vertical alignment of text and images.

What I WANT:

A single line of text, centered vertically with inline images of varying unknown sizes, in a block stuck to the bottom of the screen, basically like this:

The text will always be less than a single "screen width" line, but the images height could vary (larger and/or smaller than text height).

What I HAVE:

  • 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.

Below is my code that's producing "what I have" (above). I've experimented with countless frustrating variations and only seem to get farther away from what I want.

How is it possible that so many attributes seem to affect nothing?! (I assume my mistake is something silly and/or obvious!)

.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>
ElasticCode
  • 7,311
  • 2
  • 34
  • 45
ƬƦƖƝƛ
  • 169
  • 1
  • 11
  • `min-height` vs `height` => see [here](https://stackoverflow.com/questions/39309205/height-calculation-by-browsers-containing-blocks-and-children) – kukkuz Mar 23 '19 at 16:10
  • Unfortunately you are asking to many questions in one, and either on top, or because, of that, make this more complicated than it has to be. I closed this with 2 dupes explaining what I assume (and your drawing show) you are looking for. – Asons Mar 23 '19 at 16:51

1 Answers1

-2

Try placing your text in span tags, and using the css padding properties (padding/padding-top/padding-right etc..) to adjust the text position within the spans.

Buga Wuga
  • 1
  • 1
  • This answer doesn't solve the question. OP needs the content align dynamically, and adjusting text position with padding won't fix that. – Asons Mar 23 '19 at 16:52