テキスト内の画像の垂直方向の配置

#この例は、

#テキストイメージの垂直方向の配置を設定する方法を示します。

分析例:

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>

提出するリセットコード

自動運転

全画面表示