CSS画像の後ろのテキストを中央に配置できない場合はどうすればよいですか?

CSS 画像の後ろのテキストが中央に配置できない問題の解決策: 最初に HTML サンプル ファイルを作成し、次に画像とテキストをレイアウトし、最後にスタイル「vertical-align: middle」を追加します。画像とテキストをそれぞれできます。

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

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

CSS 画像の後のテキストを中央揃えにすることはできません。

たとえば、次のようになります。今私は、アイコンと「削除」という単語だけで構成される単純な削除ボタンを作成するために、それをどのようにレイアウトするかを考えるために 30 秒与えます。

わかりました、最初に HTML コードを次のように表示します:

<div class="del"><span class="icon"></span><span>删除</span></div>

これは非常に簡単です。del クラスの div 要素の下に 2 つの spam タグがあります。もちろん、アイコンを直接置き換えることもできます。 （疑似要素のことや昔のことを考えるとまだ分かりませんが…）

次に、次のように CSS を記述します:

.del {
font-size: 18px;
}
.del .icon {
display: inline-block;
width: 16px;
height: 24px;
margin-right: 5px;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}

すると、次のようになります:

え？想像してたのと違う気がする！写真と文字を縦に並べることができないのはなぜですか?なぜですか?

これは、デフォルトでは、図とテキストがベースラインに基づいて行内で垂直に配置されるためです。図のベースラインは図の下部にありますが、テキストのベースラインは中点よりも下にあります。上図のように表示されます。では、この問題をどうやって解決すればいいのでしょうか？

これは非常に簡単です。画像とテキストにそれぞれvertical-align: middleを追加するだけです:

.del .icon {
display: inline-block;
width: 18px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}
.del span {
vertical-align: middle;
}

この場合、画像とテキストは中心線に揃えられます。

説明:

vertical-align 属性は、要素の垂直方向の配置を設定します。

vertical-align 属性は、要素が配置されている行のベースラインを基準としたインライン要素のベースラインの垂直方向の配置を定義します。負の長さの値とパーセント値を指定できます。これにより、要素が上がるのではなく下がります。表のセルでは、このプロパティはセル ボックス内のセルの内容の配置を設定します。

vertical-align:middle を使用して、要素を親要素の中央に配置します。

以上がCSS画像の後ろのテキストを中央に配置できない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。