CODEWITHSUNDEEP
htmlcssimagealignment
Nejox
Nejox

Reputation: 41

HTML align Image

i have create the folowing html

http://www.bilder-upload.eu/show.php?file=714cc2-1469113881.jpg

How can i change the alignment that the images will place at the bottom of the white area? I tried everything with align-Vertical but this does not work. And i want not change the width of the images that they fit.

This should be the result

but i maneged it with 'margin-top:-4em' and i think this is not the right way because the possition will be changed if the window becomes smaller

This is my Code

HTML

<nav class="nav">
  <ul>
    <li><a href="index.html" class="active"><img src="images/home.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/auto.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/bus.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/bahn.png" /></a></li>
  </ul>
</nav>

CSS

/* Navigation */
nav
{
    display:block;
    height:2.5em;
    background:#ffffff;
    text-align:center;
}

nav ul
{
    display:block;   
}

nav ul li
{
    display:inline;   
    margin:0em 0.188em 0em 0.188em;    
     
}

nav ul li a
{
    color:#454040;
    font-size:1.125em;
    line-height:2.5em;  
    padding:0.563em 0.938em 0.375em 0.983em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}

nav ul li a img
{        
    width:4%;   
    height:auto;
}

Thanks for Help Greetings Nejox

Upvotes: 1

Views: 104

Answers (4)

Nejox
Nejox

Reputation: 41

Ok i manged it by setting the max-width of the images and use margin-top the get the right possition

nav ul li a img
{  
    margin-top:-4.5em;
    width:4%;   
    height:auto;
    max-width:80px;
}

Upvotes: 0

rodoggx
rodoggx

Reputation: 9

If I understand correctly, if you want to change the placement of the images closer to the white area in the image (without distorting the image) then you will need a photo editor (i.e. photoshop) to edit the image. CSS can not make this change.

Also it appears you are working with 2 separate images. 1. The image in your code is 714cc2-1469113881.jpg which is width 928px and height 139px. The image in your example is UyHCB.jpg which is width 546px and height 172px. Why 2 different images? 2. Why is the image within an input tag that is outside a form tag?

Upvotes: 1

Tob
Tob

Reputation: 943

The navigation must have a height bigger than the pictures. I'm on the go with my phone. Maybe I can checkout your code later.

Upvotes: 0

Tob
Tob

Reputation: 943

Have you tried inline-block and vertical-align:bottom ?

Upvotes: 0

Related Questions