Image won't align at top of div - see example

Question

I cannot figure out how to make all my images align at the top instead of centred like they are. If you look here the images with larger captions align at the top and it looks silly since they don't all line up. I was wondering if someone could help me figure out why. Here is the CSS for the DIV that contains the images:

thumbnail {
    font-size: 10px;
    width: 125px;
    padding: 5px;
    margin: 0;
    display: inline-block;
    color: #fff;
    text-align: center;
    white-space: normal;
}

img{
    position: relative;
}

`.thumbnail { ... vertical-align:top; }` [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) — showdev, Sep 04 '14 at 19:47

score 4 · Accepted Answer · answered Sep 04 '14 at 19:48

4

Did you try adding vertical-align: top; to your thumbnail ?

answered Sep 04 '14 at 19:48

Malik Fassi

488
1
10
25

1

It would be nice if you explained the answer instead of posting it in a question to the OP. Your answer was flagged as low quality which is why I am suggesting you to improve it. – Huangism Sep 04 '14 at 20:17

score 2 · Answer 2 · answered Sep 04 '14 at 19:49

2

Use vertical-align: top; In your thumbnail div.

answered Sep 04 '14 at 19:49

Will Hodges

47
7

score 2 · Answer 3 · answered Sep 04 '14 at 19:50

2

vertical-align:top; on the thumbnail class should fix this.

answered Sep 04 '14 at 19:50

sis

142
13

Image won't align at top of div - see example

3 Answers3