HTML + CSS für Centering Vertical Text neben einem Bild

Hallo Jeder und tks im Voraus für Ihre Hilfe ... Ich bin auf der Suche nach der besten Praxis eine einfache Frage zu lösen:HTML + CSS für Centering Vertical Text neben einem Bild

.left { 
 
    float: left; 
 
    width: 79%; 
 
    margin-right: 1%; 
 
} 
 
.left img { 
 
    float: right; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 20%; 
 
}

<div class="main"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    </div> 
 
    <div class="right">A TEXT</div> 
 
</div>

Wie soll ich den Text vertikal in der Mitte des Bildes zentrieren (ohne px in Rand oben oder unten, weil die Breite/Höhe des Bildes dynamisch sein wird). Danke!

Quelle

2016-10-01 Fryla- Cristian Marucci

würde ich so etwas wie dieses [FIDDLE] versuchen (https://jsfiddle.net/Lf2fk8cc/2/) – Abhi

Mögliches Duplikat von [Text vertikal neben einem Bild ausrichten?] (Http://stackoverflow.com/questions/489340/v ertically-align-text-next-to-a-image) – Rob

Anstelle von "Zentrieren von vertikalem Text" meinen Sie "Vertikaler Zentrier-Text". Ansonsten klingt es so, als ob der * Text * vertikal ist und nicht die Achse, auf der er zentriert ist. –

Sie könnten flexbox verwenden. Siehe Beispiel:

.main{ 
    display: flex; 
    align-items: center; 
}

https://jsfiddle.net/zb2ozq1k/1/

Quelle

2016-10-01 14:37:30 marcelo2605

Ihrer Geige fehlt das CSS. Ich weiß nicht, ob das beabsichtigt war. –

@ J-Bar I aktualisiert. Vielen Dank. – marcelo2605

nette Antwort. aber es würde nicht funktionieren mit ie9 ich denke –

ich von float loswerden würde und verwenden table-cell statt s. Verwenden Sie dann vertical-align:middle für den Text.

So:

.main{ 
 
    display: inline-table; 
 
    border: 1px solid blue; 
 
} 
 

 
.left { 
 
    width: 79%; 
 
    margin-right: 1%; 
 
    display: table-cell; 
 
    border: 1px solid green; 
 
} 
 

 
.right { 
 
    width: 20%; 
 
    border: 1px solid red; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="main"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    </div> 
 
    <div class="right">A TEXT</div> 
 
</div>

Quelle

2016-10-01 14:45:04 ochi

h1 { 
    display: inline; 
    vertical-align:top; 
}

<div class="middle"> 
    <img src="http://placekitten.com/200/150" > 
    <h1>A TEXT</h1> 
</div>

Quelle

2016-10-01 17:50:44

HTML + CSS für Centering Vertical Text neben einem Bild

Antwort

Verwandte Themen