Align top and bottom within the same element

HTML & CSS
1

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)?

2

Flex would be the easiest:

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

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:

web148

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

3 Likes
4

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

e.g.

.item p{margin-top:auto}

Screen Shot 2023-05-26 at 13.27.20
Screen Shot 2023-05-26 at 13.27.201594×393 62.1 KB

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

3 Likes
5

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

1 Like
6

Please explain what you wish to know about.

2 Likes
7

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!

8

Your web page now looks much better.

I spotted two unwanted commas:
web148-2

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:
Azcona-Guisella

4 Likes
9

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…

EDIT

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

10

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:

web148-3

It was just a suggestion!

1 Like
11

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