CODEWITHSUNDEEP
htmlcss
GibboK
GibboK

Reputation: 73928

How to align an image at the bottom of li element?

How to align an image at the bottom of li element. In my case I need the smile align with the bottom edge of the square.

http://jsfiddle.net/Jvgrz/

<ul>
    <li>a</li>
        <li>b</li>
        <li><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"></li>
</ul>


li {
    position: relative;
    width:100px;
    height:100px;
    border: 1px solid red;

}

Upvotes: 0

Views: 1459

Answers (3)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

If its some kind of botton edge then you might use it as: 

img {
position: absolute;
bottom: 0px;
right: 0px;
}

As to make sure that the image is somewhere at the edge not in the center. If maybe you want in center. Then remove right:0px; However you can use this: 

img {
 align: center|top|left|right;
 }

As this is supported by all major browsers!

Upvotes: 0

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

You can simply set absolute position to your img tag to achieve it.

Here is updated Fiddle

In CSS add this img clause

img {
    position: absolute;
    bottom: 0px;
}

Upvotes: 1

jampafoo
jampafoo

Reputation: 176

You could make the image have an absolute position with css.... like this.

li img { position: absolute; bottom: 0; }

Upvotes: 4

Related Questions