Wie man Text in die Mitte eines Bildes legt

Hallo Mit CSS versuche ich, Text auf einem Bild zu zentrieren, so dass es so aussieht.Wie man Text in die Mitte eines Bildes legt

<div> 
------- 
|P | 
| I | This is some text. 
| C| 
------- 
</div>

Wie kann ich dieses Ergebnis erzielen? Weiß nicht, ob das hilft, das Bild ist 32x32 Pixel.

Quelle

2011-01-02 afarazit

img { vertical-align: middle; }

(obwohl Sie wahrscheinlich eine spezifischere Wähler wollen) und

<div> 
<img alt="…" src="…" height="32" width="32"> This is some text. 
</div>

Quelle

2011-01-02 22:39:03 Quentin

Das tat es schön und einfach :) – afarazit

Kann das Bild ein Hintergrund sein? Wenn ja, versuchen

<div style="line-height: 32px; padding-left: 32px; background: url('PIC');">This is some text</div>

Quelle

2011-01-02 22:38:49 Soumya

Verwenden Sie die CSS-Eigenschaft (auf dem Bild) vertical-align:middle;

Wenn Mitte passt nicht zur Rechnung, Experimentieren Sie, um zu sehen, was mit Ihrem Schriftart-Gesicht und Schriftgröße funktioniert.

Hier ist die full list of values

Quelle

2011-01-02 22:41:59

@ Alex Ihre Antwort wie David ist richtig – afarazit

ich die div haben Ihr Bild machen würde, wie der Hintergrund dann Ihren Text in, in der Mitte geben Sie es und etwas Padding oder Margin hinzufügen, um es nach unten zu bewegen und es perfekt zentriert.

z.B.

div  { 
    width:32px; 
    height:21px; 
    padding-top:11px; 
    text-align:centre; 
    font-size:10px; 
    background:url(yourImageURL) no-repeat; 
}

Sie könnten nur müssen die Polsterung, Höhe und/oder font-size zu bekommen das perfekte verticle Zentrum

Quelle

2011-01-02 22:42:45 brenjp