CODEWITHSUNDEEP
htmlcss
NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5173

Vertically align image with dynamic text

So I have a div, whose height I don't know initially. It has two children - an <img> on the left, and a <div> contains some content on the right. The image size is fixed, say 50 by 50. However, the content can be of any size. It may be even one line, in which case it becomes smaller in size compared to the photo. Either way, the parent div has to find out which one is bigger and grow vertically to accommodate both, while ensuring that both are properly centered (taking into account a vertical padding of 5 px).

Also imagine that the content won't wrap below the image, i.e it is a standalone element on the right side (as if floating right).

That is, if the content is say just one line, then the parent div should be of height 50+5*2 = 60px, the img on the left being centred at 5px from top, the content on the right (assume at a margin of 5 px from the left), which here is just one line, centred vertically.

Or say the content is so big that it is 100px high, then the parent div will be 100+5*2 = 110px high. The img will be on the left, at 30px from the top.

Can anyone help me fix the issue?

This is what I came up with: https://jsfiddle.net/fj77eobe/

.elem-option {
  text-align: left;
  white-space: nowrap;
  width: 300px;
  background: pink;
}
/* The ghost, nudged to maintain perfect centering */
.elem-option:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
/* The element to be centered, can also be of any width and height */
.elem-photo {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  margin-left: 10px;
}
.elem-content {
  display: inline-block;
  margin-left: 5px;
  width: 100px;
  word-wrap: break-word;
  overflow: none;
}
<div class='elem-option'>
  <img src="https://img.zmtcdn.com/data/reviews_photos/b22/28f633be81fd340785c3af7f7858cb22_1463913069.jpg" class="elem-photo" />
  <div class='elem-content'>
    Amader ekhane ekjon er heavy khar chhilo...take paedo bole khepano hoto..toh se ajkal ei defense deyAmader ekhane ekjon er heavy khar chhilo...take paedo bole khepano hoto..toh se ajkal ei defense deyAmader ekhane ekjon er heavy khar chhilo...take paedo
    bole khepano hoto..toh se ajkal ei defense deyAmader ekhane ekjon er heavy khar chhilo...take paedo bole khepano hoto..toh se ajkal ei defense dey
  </div>
</div>

Upvotes: 0

Views: 82

Answers (1)

Stickers
Stickers

Reputation: 78706

Try setting the container to display: flex; + align-items: center;

.elem-option {
  display: flex;
  align-items: center;
  padding: 5px;
  background: pink;
}
.elem-photo {
  margin-right: 5px;
  flex: 0 0 50px;
  height: 50px;
}
<div class='elem-option'>
  <img src="//unsplash.it/200" class="elem-photo" />
  <div class='elem-content'>
    Lorem ipsum dolor sit amet.
  </div>
</div>

<br>

<div class='elem-option'>
  <img src="//unsplash.it/200" class="elem-photo" />
  <div class='elem-content'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
  </div>
</div>

Upvotes: 1

Related Questions