CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 2922

Can you vertically align the text of a paragraph that also contains a floated image?

Here is what I am trying to achieve: layout

Given the following markup: 

p > img {
  float: left;
  margin: 1em;
}
<p>
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio,
</p>

My largest hurdle is that I cannot change this markup. So, my question revolves around this specific scenario: Is it possible to vertically align the text inside of an element which also contains a floated image?

Upvotes: 2

Views: 44

Answers (2)

justinw
justinw

Reputation: 3966

As an alternative to the flex method you could change the position property on the img element and use padding and calc() for some good text positioning.

DEMO

Of course, YMMV depending on whether or not img elements will have standard sizing and how long your text will be.

p > img {
  position: absolute;
  top: 0;
  left: 0;
  margin: 1em;
}

p {
  position: relative;
  padding-left: calc(300px + 1.25em);
  padding-top: 150px;
}
<p>
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
  A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.
</p>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can do this with Flexbox

p {
  display: flex;
  align-items: center;
}

img {
  flex: 0 0 200px;
  margin: 10px;
}
<p>
  <img src="http://placehold.it/200x200">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque. Duis vulputate commodo lectus, ac blandit elit tincidunt id. Sed rhoncus, tortor sed eleifend tristique, tortor mauris molestie elit, et lacinia ipsum quam nec dui. Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio,
</p>

Upvotes: 2

Related Questions