HTML-Bild und Text nach oben und unten ausrichten

Ich verwende den folgenden Code, um ein Bild und etwas Text wie 1 2 3 4 direkt darauf anzuzeigen. Ich bin neu in HTML und CSS und während das Bild Teil gut funktioniert, würde ich den Text gerne ausgerichtet werden, um die oberen und unteren Teil des Bildes zu füllen, wie folgt aus:HTML-Bild und Text nach oben und unten ausrichten

gleiche Art und Weise, wenn ich mehr Text hinzufüge, dann automatisch auszurichten ... Wo soll ich das suchen?

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style></style> 
 
    </head> 
 
    <body> 
 
    <img src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png" />1 2 3 4 
 
    </body> 
 
</html>

Quelle

2017-05-12 darkchampionz

Thare ist keine einfache Möglichkeit, es zu tun. Sie können so etwas mit css line-height oder flex box tun. Aber wenn Sie gerade anfangen zu lernen, werde ich Ihnen anbieten, damit zu warten, weil es zu einem fortgeschritteneren Niveau ist. –

@MosheHarush außer dass es gibt :) – Obsidian

@Obsidian Nach dem, was er sagte, ist auf der "Start" Ebene. Ich bin mir nicht sicher, ob Sie sich in einen Flex begradigen sollten, der relativ zu etwas Neuem und Fortgeschrittenem gilt. –

Mit etwas CSS Flex Magie

Das komplett skalierbar und wird unabhängig davon arbeiten, welche Größe das Bild.

#imgWrap, 
 
#imgWrap ul{ 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
#imgWrap ul{ 
 
    -ms-flex-direction: column; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    flex-direction: column; 
 
    -webkit-justify-content: space-around; 
 
    -ms-flex-pack: distribute; 
 
    justify-content: space-around; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
}

<div id="imgWrap"> 
 
    <img src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ul> 
 
</div>

Quelle

2017-05-12 14:32:00 Obsidian

+1, aber ich würde' flex: 1' auf den Kindern entfernen und 'justify-content: space-between' auf dem Elternteil verwenden, um es genau so zu machen ops Bild. –

@MichaelCoker genehmigt und verbessert. – Obsidian

-1

<!DOCTYPE html> 
<html> 
<head> 
<style> 
</style> 
</head> 
<body> 

<img src = "yourimagesource">1</br>2</br>3</br>4 

</body> 
</html>

Wenn Sie das getan haben Sie gerade das text-aligment Attribut des Bild im Editor Sie verwenden ändern können.

Sie könnten auch eine Tabelle erstellen, die Ihre Werte enthält und auf der linken Seite Ihres Bildes ausrichtet.

Quelle

2017-05-12 14:31:51

Es gibt nicht so etwas wie 'text-aligment' oder'
' – Quentin

Hinweis: Flex unterstützt nicht in IE9, IE8 und IE7, so dass ich nicht verwenden.

Try This:

#wrapper { 
 

 
    position: relative; 
 
    overflow: hidden; 
 

 
} 
 

 
#wrapper:after { 
 
    display:block; 
 
    clear:both; 
 
    content:''; 
 
} 
 

 
#Number { 
 

 
    height: 100%; 
 
    position: absolute; 
 
    margin-left: 130px; 
 
    box-sizing:border-box; 
 

 
} 
 

 
.im { 
 

 
    float: left; 
 
\t \t \t 
 
} 
 

 
span { 
 

 
    display: block; 
 
    height: 28%; 
 
      \t 
 
}

<div id="wrapper"> 
 

 
    <img class="im" src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png"> 
 

 
    <div id="Number"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
</div> 
 

 
</div>

Quelle

2017-05-12 14:59:22 Ehsan

Für hält es einfach, dass man das Bild auf Hintergrund einstellen und Polsterung in der Breite des Bildes machen:

#imgHolder{ 
 
    background-image: url('http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png'); 
 
    background-repeat: no-repeat; 
 
    height: 130px; 
 
    padding-left: 130px; 
 
    line-height: 32px; 
 
}

<div id="imgHolder"> 
 
    1 
 
    <br/> 
 
    2 
 
    <br/> 
 
    3 
 
    <br/> 
 
    4 
 
</div>

Quelle

2017-05-12 15:10:44

HTML-Bild und Text nach oben und unten ausrichten

Antwort

Verwandte Themen