CSS: Text links und rechts um ein zentriertes Bild platzieren

Ich möchte Text um ein zentriertes Bild nach links und rechts platzieren. Siehe:CSS: Text links und rechts um ein zentriertes Bild platzieren

<div style="position:relative; display: table; margin: 2em auto;"> 
    <span>TEXTSAMPLE 12345</span> 
    <img src="http://placehold.it/350x150" style="height: 4em;"> 
    <span>12345</span> 
</div>

ich herausgefunden, wie die ganze Sache zum Zentrum, aber ich mag das Bild tot zentriert werden und den Text entsprechend anpassen.

Mit Float versucht, aber ich bekomme kein richtiges Ergebnis. Irgendwelche Ideen?

Dank

Quelle

2017-05-04 noIdeaAtAll

Sie können flex auf dem übergeordneten verwenden, dann flex-grow (oder flex: 1 0 0 kurz) auf dem Text divs, so dass sie alle zur Verfügung stehenden Raumes, der durch das Bild links über füllen werden (setzen Sie das Bild in der Mitte), dann verwenden Sie text-align im ersten Bereich, um den Text nach dem Bild zu setzen. Ich wickelte auch Ihre img in ein Element seit img 's wie Flex Kinder in der Regel am Ende Stretching.

div { 
 
    display: flex; 
 
} 
 

 
span:not(.img) { 
 
    flex: 1 0 0; 
 
} 
 

 
span:first-child { 
 
    text-align: right; 
 
}

<div> 
 
    <span>TEXTSAMPLE 12345</span> 
 
    <span class="img"><img src="http://placehold.it/350x150" style="height: 4em;"></span> 
 
    <span>12345</span> 
 
</div>

Quelle

2017-05-04 16:14:03

erwartete Ergebnis zu erzielen, verwenden Sie unter Option - Anzeige: flex für Inhalt und vertikal

CSS sowohl horizontal als Zentrierung:

html,body{ 
    height:100%; 

} 
body, div{ 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

HTML:

<body> 
<div> 
    <span>TEXTSAMPLE 12345</span> 
    <img src="http://placehold.it/350x150" style="height: 4em;"> 
    <span>12345</span> 
</div> 
</body>

Codepen- https://codepen.io/nagasai/pen/vmeYzb

Quelle

2017-05-04 16:16:35

Sie eine Tabelle ohne Grenzen mit 3 Spalten und 1 Zeile erstellen können. In der ersten und letzten Zelle setzen Sie Ihren Text so, wie Sie wollen; In der Mitte setzen Sie das Bild:

<table> 
<tr>text 1</tr> 
<tr><img...></tr> 
<tr>text 2</tr> 
</table>

Quelle

2017-05-04 16:19:42 EmLe49

CSS: Text links und rechts um ein zentriertes Bild platzieren

Antwort

Verwandte Themen