CSSで画像と文字の高さを揃える方法-CSSチュートリアル-php.cn

CSSで画像と文字の高さを揃える方法

藏色散人

リリース： 2022-12-30 11:11:47

オリジナル

4085 人が閲覧しました

CSS で画像とテキストの高さを同じに設定する方法: 1. CSS 属性「vertical-align:middle;」を追加します。 2. 画像とテキストをそれぞれ div に配置し、画像とテキストの高さを実現するには、margin 属性を使用します。テキストやその他の高度な効果で十分です。

CSSで画像と文字の高さを揃える方法

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

推奨: css ビデオチュートリアル

CSS は画像とテキストを同じ行に配置します

誰もがフロントエンドを行っています開発当時、imgタグとテキストが同じ行にあることがよくありました。

そこで、私が最初に始めたとき、問題を解決するためにフロートレイアウトを使用しました。レイアウトの配置 (互換性を調整する必要があり、費用対効果がありません)。他の方法は次のとおりです:

1. CSS 属性を追加します:vertical-align:middle;

コード:

<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>

ログイン後にコピー

各オブジェクトのvertical-align 属性を設定します。属性の説明:

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

ログイン後にコピー

2.divネスト: 画像とテキストにそれぞれ div を配置し、マージンを使用して任意の位置に慣れることができます

コード:

<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>

ログイン後にコピー

3. 画像を背景として使用します:

画像がテキストの左側に配置される小さなアイコンとして使用される場合は、この方法をお勧めします。画像はテキストの背景として設定され、ループせず、上に配置され、画像の幅に数ピクセルを追加することにより、テキストが左側に埋め込まれます。

コード:

<style>
 a img{border:none} .testTXT{ height:60px; line-height:60px; padding-left:65px; background:url(http://www.zc144.com/download/Template.jpg) no-repeat left center }
</style>
<div class="testdiv">
<div class="testTXT">
<span>这里是文字,看看文字对齐了没</span>
</div>
</div>

ログイン後にコピー

以上がCSSで画像と文字の高さを揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。