Question 43543 in Html Question posted in
Some basic documentation can be found here.

Align items with multiple lines with another element – Html

I need to align images and text as in the bottom example; so the image aligns to the top of the text when the text has 2 lines. In my code it’s aligning to the center:

.product-legend {
  font-size: 12px;
  max-width: 210px;
}

.product-legend-img {
  display: inline-block;
  position: absolute;
}

.product-legend-text {
  display: inline-block;
  font-size: 12px;
  width: 200px;
  margin-left: 40px;
}
<div>
  <div class="product-legend-img">img</div>
  <div class="product- legend-text">NEW! this is a test</div>
</div>
<div>
  <div class="product-legend-img">img</div>
  <div class="product- legend-text">NEW! this is a test of a line with two lines of text</div>
</div>
<div>
  <div class="product-legend-img">img</div>
  <div class="product- legend-text">More features</div>
</div>
<div>
  <div class="product-legend-img">img</div>
  <div class="product- legend-text">Another line</div>
</div>

I tried setting the elements as span, and setting a height but I can’t seem to vertically-align the images.

Tags:

2

Answers


  1. 0

    I guess you mean something like this?

    I used a flexbox because it’s simpler to position the text this way. So the list is displayed in columns (this is not necessarily needed flex-direction: column as this is also a lists default as long as the items do not have display: inline | inline-block) and the items are displayed in rows (flex-direction: row is the default value, so by setting display: flex it’s a row). Each list-item has (due to display: flex & row (again, default value)) the same height. Its childs too meaning image (wrapper, <picture>) and the text wrapper (.text) have the same height (info: thats not the case if they are displayed in columns). You can position smaller elements like the text with align-items: start separately. See css tricks flexbox guide for further info on flexbox.

    ul {
  list-style-type: none;
  // both optional
  display: flex;
  flex-direction: column;
 }

li {
  display: flex;
  align-items: start;
}

picture, .text {
  width: 50%;
  flex-shrink: 0;
}

.text { padding-left: 1rem; }

img { width: 100%; }
    <ul>
  <li>
    <picture>
      <img src="https://dummyimage.com/512x512/000/eee.gif&text=your+image" alt="img" />
    </picture>
    <div class="text">
      <h2>headline</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
  </li>
  <li>
    <picture>
      <img src="https://dummyimage.com/512x512/eee/000.gif&text=your+image" alt="img" />
    </picture>
    <div class="text">
      <h2>headline</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    You just need display: flex; on the parent, remove the space from the clasname, and get rid of position: absolute;

    .product-legend {
  font-size: 12px;
  max-width: 210px;
}

.product-legend-img {
  display: inline-block;
  /*position: absolute;*/
}

.product-legend-text {
  display: inline-block;
  font-size: 12px;
  width: 200px;
  margin-left: 40px;
}

.product {
  display: flex;
  
  /* border for demonstraition purposes only */
  border-top: 1px solid blue;
}
    <div class="product">
  <div class="product-legend-img"><img src="https://via.placeholder.com/200"></div>
  <div class="product-legend-text">NEW! this is a test</div>
</div>
<div class="product">
  <div class="product-legend-img"><img src="https://via.placeholder.com/200"></div>
  <div class="product-legend-text">NEW! this is a test of a line with two lines of text</div>
</div>
<div class="product">
  <div class="product-legend-img"><img src="https://via.placeholder.com/200"></div>
  <div class="product-legend-text">More features</div>
</div>
<div class="product">
  <div class="product-legend-img"><img src="https://via.placeholder.com/200"></div>
  <div class="product-legend-text">Another line</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search