HTML align Bild

ich habe die folowing html erstellenHTML align Bild

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

Wie kann ich die Ausrichtung ändern, dass die Bilder am unteren Rand des weißen Bereichs stattfinden wird? Ich habe alles mit align-Vertical versucht, aber das funktioniert nicht. Und ich möchte nicht die Breite der Bilder ändern, die sie passen.

This should be the result

aber ich maneged es mit ‚margin-top: -4em‘ und ich denke, das ist nicht der richtige Weg ist, weil die possition geändert wird, wenn das Fenster kleiner wird

Dies ist mein 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; 
 
}

Vielen Dank für Hilfe Grüße Nejox

Quelle

2016-07-21 Nejox

Haben Sie Inline-Block k und vertical-align versucht: Boden?

Quelle

2016-07-21 15:33:39 Tobias

Auf welcher Position? – Nejox

Zuerst würde ich all diese Sachen mit ul li a und dann tun nur Nav a. A sollte Inline-Block anzeigen und Unten vertikal ausrichten. – Tobias

Nein, hat nicht funktioniert :( – Nejox

Die Navigation muss eine größere Höhe als die Bilder haben. Ich bin mit meinem Handy unterwegs. Vielleicht kann ich deinen Code später auschecken.

Quelle

2016-07-21 16:19:36 Tobias

Wenn ich richtig verstehe, wenn Sie die Platzierung der Bilder näher an den weißen Bereich im Bild ändern möchten (ohne das Bild zu verzerren), dann benötigen Sie einen Fotoeditor (d. H. Photoshop), um das Bild zu bearbeiten. CSS kann diese Änderung nicht vornehmen.

Es scheint auch, dass Sie mit 2 separaten Bildern arbeiten. 1. Das Bild in Ihrem Code ist 714cc2-1469113881.jpg, das Breite 928px und Höhe 139px ist. Das Bild in Ihrem Beispiel ist UyHCB.jpg, das eine Breite von 546px und eine Höhe von 172px hat. Warum 2 verschiedene Bilder? 2. Warum befindet sich das Bild innerhalb eines Eingabe-Tags außerhalb eines Formular-Tags?

Quelle

2016-07-21 16:36:48 rodoggx

Was? Ich verstehe dich nicht. Die beiden Bilder, die ich gepostet habe, ist nur eine von meinem HTML geschnitten. Ich schreibe, dass ich bereits die richtige Positionierung der Bilder mit margin-top: -4em in der CSS-Block nav ul li a img. Aber das funktioniert nur richtig, wenn Sie nicht Ihr Fenster skalieren. – Nejox

Ok manged ich es durch die max-width der Bilder einstellen und nutzen margin-top das bekommen die richtige possition

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

Quelle

2016-07-22 08:47:00 Nejox

Antwort

Verwandte Themen