テキスト内の画像の垂直方向の配置
#この例は、
#テキスト イメージの垂直方向の配置を設定する方法を示します。
分析例:
vertical-align 属性は、要素の垂直方向の配置を設定します。
説明:vertical-align 属性は、要素が配置されている行のベースラインを基準としたインライン要素のベースラインの垂直方向の配置を定義します。負の長さの値とパーセント値を指定できます。これにより、要素が上がるのではなく下がります。表のセルでは、このプロパティはセル ボックス内のセルの内容の配置を設定します。
#次の属性値を設定できます。
●ベースライン: デフォルト値。要素は親要素のベースラインに配置されます。
##● Sub: テキストの下付き文字を縦に揃えます。●super: テキストの上付き文字を垂直方向に揃えます。
●top: 要素の上端を最上位の要素の上端に揃えます。行
#● Text-top: 要素の上部を親要素のフォントの上部に揃えます
● middle : この要素を親要素の中央に配置します。
#bottom: 要素の下端を行の最下位要素の上端に揃えます。
● text-bottom: 要素の下端を親要素のフォントの下端に揃えます。
● 長さ:
● %: 「line-height」属性のパーセンテージ値を使用して、この要素を配置します。負の値も許可されます。
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>一个<img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" />默认对齐的图像。</p>
<p>一个<img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-top 对齐的图像。</p>
<p>一个<img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="w3cschool" width="150" height="50" /> text-bottom 对齐的图像。</p>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
