So gleichen Sie die Höhe von Bildern und Text in CSS an

So stellen Sie die gleiche Höhe von Bildern und Text in CSS ein: 1. Fügen Sie das CSS-Attribut „vertical-align:middle;“ hinzu. 2. Fügen Sie das Bild und den Text jeweils in ein Div ein und verwenden Sie dann das Margin-Attribut, um dies zu erreichen der gleiche Höheneffekt für Bild und Text. Das war's.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Empfohlen: CSS-Video-Tutorial

CSS zum Ausrichten von Bildern und Text in derselben Zeile

Bei der Front-End-Entwicklung stoßen Sie häufig auf IMG-Tags und Text in derselben Zeile.

Als ich anfing, habe ich das Positionierungslayout verwendet (die Kompatibilität muss angepasst werden und ist nicht kosteneffektiv):

1 :middle ;

Code:

<style>
a img{border:none} .testdiv *{ vertical-align:middle; }
</style>
<div class="testdiv">
<a href="http://www.zc144.com/">
<img src="http://www.zc144.com/download/Template.jpg" alt="这里是图片"/>
</a>
<span>这里是文字,看看文字对齐了没</span>
</div>

Legen Sie das Vertical-Alignment-Attribut jedes Objekts fest, Attributbeschreibung:

baseline－将支持valign特性的对象的内容与基线对齐 
sub－垂直对齐文本的下标 
super－垂直对齐文本的上标 
top－将支持valign特性的对象的内容与对象顶端对齐 
text-top－将支持valign特性的对象的文本与对象顶端对齐 
middle－将支持valign特性的对象的内容与对象中部对齐 
bottom－将支持valign特性的对象的文本与对象底端对齐 
text-bottom－将支持valign特性的对象的文本与对象顶端对齐

2.div-Verschachtelung: Fügen Sie das Bild und den Text jeweils in ein Div ein. Sie können den Rand verwenden, um sich mit jedem vertraut zu machen Positionierung

Code:

rrree

3. Verwenden Sie das Bild als Hintergrund:

Wenn Ihr Bild nur als kleines Symbol verwendet wird, das auf der linken Seite des Textes platziert wird, wird diese Methode empfohlen als Hintergrund des Texts, bildet keine Schleife und wird links positioniert. Zentrieren Sie die Ober- und Unterseite und füllen Sie den Text links auf, indem Sie der Breite des Bildes einige Pixel hinzufügen.

Code:

<style>
a img{border:none} .testIMG{ float:left; display:inline; margin-top:0; margin-left:5px; } .testTXT{ float:left; display:inline; margin-top:20; margin-left:5px; }
</style>
<div class="testdiv">
<div class="testIMG">
<a href="">
<img src="Template.jpg" alt="这里是图片"/></a>
</div>
<div class="testTXT">
<span>这里是文字,看看文字对齐了没</span>
</div>
</div>

Das obige ist der detaillierte Inhalt vonSo gleichen Sie die Höhe von Bildern und Text in CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!