ホームページ >ウェブフロントエンド >htmlチュートリアル >imgとspanをdivの垂直方向の中央に作成するにはどうすればよいですか?

imgとspanをdivの垂直方向の中央に作成するにはどうすればよいですか?

php中世界最好的语言
php中世界最好的语言オリジナル
2018-01-20 09:59:137505ブラウズ

今回はdiv内でimgとspanを縦方向にセンタリングする方法を紹介します。 div内でimgとspanを縦方向にセンタリングする場合の注意点は何ですか?実際の事例を見てみましょう。

<html>  
<head>  
<style>  
#test *{vertical-align:middle;}   
</style>  
<body>  
<div  
id="test">  
<img  
src="http://127.0.0.1:7001/wsc/images/message.png"/>  
<span>sdfhsdhfdksfjhtes:</span>  
</div>  
</body>  
</html>

ご注意ください: #test *{vertical-align:middle;}s

#test * は、span、input、img などのインライン要素を含む、div 内のすべての要素を表します。

vertical-align
初期値: ベースライン (デフォルト値)
継承性: いいえ
適用対象: インライン要素
説明:vertical-align:baseline は、要素のベースラインを親要素のベースラインに揃えます。
警告:vertical-align は表のセル内のコンテンツの配置に影響を与えることはできません。ブロック要素内のコンテンツにも同じことが当てはまります。

注意:vertical-align は、span、img、em、input、a などのインライン要素にのみ影響しますが、div、h3、p などのブロック要素には無効です。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 related Readinated:h5のSSEサーバーを使用してEventsource Eventsを送信する方法H5のローカルストレージとローカルデータベースの紹介H5とC3を使用して単純なクロック効果を実現する

以上がimgとspanをdivの垂直方向の中央に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。