Why is text vertically aligned in CSS Grid?

Question

I am trying to add 2 images with different heights and some text (height of text is different). I'm using Grid to create same height for divs with images (don't want to use height, because I don't know the height of images).

I don't know why, when I use display:grid the text is aligned in middle of the div. Some idea? I wasn't able to find out why.

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: start
}

.magazine-item {
  width: 50%;
  display: grid;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/ELLE-EFFE_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

it's not really aligned but this is the logical result of the grid calculation since you didn't define any template. Inspect the element to better see — Temani Afif
– Temani Afif, Commented Apr 10, 2019 at 20:50
@TemaniAfif and can I align it at top? My problem is that I won't know how many divs there's gone by. It can by 2 or more. So, I do't know how to define the template without knowing the number of divs — Valentin Emil Cudelcu
– Valentin Emil Cudelcu, Commented Apr 10, 2019 at 20:53
add grid-template-rows:auto 1fr (on the grid container) or use align-items:flex-start (on the flex container) — Temani Afif
– Temani Afif, Commented Apr 10, 2019 at 20:55
@TemaniAfif Already tried it, but the left text goes upper than the right and that's beucase of the height of images, which are different (1189px and 1459px). — Valentin Emil Cudelcu
– Valentin Emil Cudelcu, Commented Apr 10, 2019 at 21:01

Michael Benjamin · Accepted Answer · 2019-04-11 16:35:10Z

1

p elements have default top and bottom margins.

These margins make your text appear centered in their containers.

Make them smaller or remove them.

Add this to your code:

p { margin-top: 0 }

You may also want to remove the descender space below images.

Add this to your code:

img { vertical-align: bottom; }

/* new */
p   { margin-top: 0; }
img { vertical-align: bottom; }


* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: start
}

.magazine-item {
  width: 50%;
  display: grid;
  border: 1px solid red;
}

.magazine-item img {
  width: 100%;
}

.double-text {
  width: 80%;
  margin: auto;
}

<div class="magazine-items">
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/ELLE-EFFE_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Porovnání detailů designu série Elle a Effe</p>
    </div>
  </div>
  <div class="magazine-item">
    <div class="img">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni. Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady
        Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

More information:

edited Apr 11, 2019 at 16:35

answered Apr 11, 2019 at 2:48

Michael Benjamin

375k110 gold badges616 silver badges737 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Valentin Emil Cudelcu Over a year ago

Thanks, it goes up, but it's not at the same line as the second text (the text on right). How could I fix that?

Michael Benjamin Over a year ago

I added link references to my answer that may assist you further. @ValentinEmilCudelcu

Collectives™ on Stack Overflow

Why is text vertically aligned in CSS Grid?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related