Text vertical-align with another element

1
votes

In the following snippet, I have a title and an image, both divs are within a container div. the image is floated right and will have a fixed height of 80px. What I want is title on the left, image on the right side of the same row, and the text the bottom aligned with the image. First I tried inline-block on .text-element and inline on .text-element-content, but vertical-align doesn't seem to work there. After a few tries and some reading, I came up with the following solution with display: table/table-cell, plus setting a fix height for .text-element, then the vertical-align: bottom worked. But then I saw another (small) problem. Now the lowerste point of "p" in title text is on the same line with the bottom line of image. But I want the bottom of other letters like "e", "d", "t" on the same line with the image-bottom line. I tried vertical-align: baseline but it seems it is for something else entirely... Is there a way to achieve what I want? And is there a better way to get vertical-align: bottom without table/table-cell? For certain reason, I may not change the DOM, only the CSS on it, and I may not use flex-box either.

The solution with a different line-height won't solve my problem entirely because it only works with this special case and as soon as the font is changed, I'll need another line-height.

.container-element {
    position: relative;   
}

.image {
    float: right;
}

.text-element {
    display: table;
    height: 80px;
}

.text-element-content {
    display: table-cell;
    vertical-align: bottom;
}
<div class="container-element">
  <div class="image">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
  <div class="text-element">
    <div class="text-element-content">I'm a title with help</div>
  </div>
</div>
3
htmlcssvertical-alignment
May I ask why you are not allowed/cannot use flex-box? - lumio
Possible duplicate of CSS - Display text at descent instead of baseline? - kukkuz
@lumio: caniuse.com tells me that IE has issues with flexbox. - yangsunny
I know, but the basics are supported quite well. And if you are not gonna support older versions of IE other than 11 (which should be fine, considering, that even Microsoft considers IE10 to be dead) you should be just fine :) I will bring my answer back - just in case - lumio

3 Answers

2
votes

You could try adjusting the line-height property for the text:

.container-element {
  position: relative;
  border-bottom: 1px solid red;
}

.image {
  float: right;
}

.text-element {
  display: table;
  height: 80px;
  line-height: .7;
}

.text-element-content {
  display: table-cell;
  vertical-align: bottom;
}
<div class="container-element">
  <div class="image">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
  <div class="text-element">
    <div class="text-element-content">I'm a title with help</div>
  </div>
</div>
1
votes

Even though you stated, that you cannot use flex-box (because of IE), I will answer with a flex-box solution. IE11 works fine with flexbox. See Known issues on caniuse.com.

Combined with order a solution could look something like this:

.container-element {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.image {
  order: 2;
}

.text-element {
  order: 1;
}
<div class="container-element">
  <div class="image">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
  <div class="text-element">
    <div class="text-element-content">I'm a title with help</div>
  </div>
</div>
0
votes

This should do it inspired by bootstrap.

.container-element {
    position: relative;   
}

.media-left,.media-right {
    display: table-cell;
    vertical-align: top
}

.media-right {
    padding-left: 10px
}

.media-left {
    padding-right: 10px
}

.media-bottom {
    vertical-align: bottom
}
<div class="container-element">
  <div class="media-left media-bottom">
    I'm a title with help
  </div>
  <div class="media-right">
    <img src="https://image.ibb.co/eTiV6a/Unbenannt_1.png">
  </div>
</div>