Align top and bottom within the same element

You can see my problem here: what I wish is to align

  • the images at the top of the element div (class="item") and
  • the text (<p></p>) at the bottom.

How should I do (possibly using flex or grid)?

Flex would be the easiest:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
.photoAndText {
    height: 150px;
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid black;
.photo {
    height: 120px;
    background-color: pink;
    <div class="photoAndText">
        <div class="photo">Photo</div>
        <div class="text">Text</div>
1 Like

I suggest you specify the height of the photos to be, say, 200px instead of specifying width. Also for the ‘item’ class use justify-content:flex-start. Photos will then align horizontally:


Best to crop photos to all have the same aspect ratio.


In your current code you can push the text to the bottom with an auto margin.


.item p{margin-top:auto}

As @Archibald said it would probably be nicer with images the same size.


Done! Following Paul and Archibald suggestions.
Thank you!
Let me know what about.

1 Like

Please explain what you wish to know about.


I mean, if in your opinion I did the right thing (in the right way / following correctly your suggestions). But your help is already very appreciated.
Thank you very much!

Your web page now looks much better.

I spotted two unwanted commas:

You may like to try the following to reduce wasted space:

  1. In norm.css file for the ‘item’ class add max-width: 260px;
  2. In norm.responsive.css file delete .item, img {max-width: 90vw;}
  3. In norm.css file for the ‘riga-flow’ class add justify-content: center;
  4. For the <h2> elements add text-align: center;.

Your photo of Azcona for example is 1080 x 1080 pixels and is 75.9 KB. After some cropping and resizing this version is just 7.9 KB:


Consider however that I have elements with .item in the Home page. And now I have a new problem: the images (svg) are no more centered…


This last problem I think it should be solved, now. Even I still don’t understand why it was raised…

I suggested max-width: 260px because the images and their captions appear widely spaced apart with much wasted space. This screenshot (resized) is from a 1920 wide monitor:


It was just a suggestion!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.