ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでテキストの位置を設定する方法
HTMLでテキストの位置を設定する方法
- 青灯夜游オリジナル
- 2021-05-20 12:56:5653548ブラウズ
htmlテキスト位置の設定方法: まず、position 属性を使用してテキスト要素の配置タイプ (絶対配置または固定配置) を設定し、次に、top、bottom、left、および right 属性を使用してオフセットを設定します。テキスト要素の値を設定し、テキスト要素の位置を設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
htmlテキスト位置の設定方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p#p1{
position: absolute;
top: 20px;
left: 20px;
}
p#p2{
position: absolute;
bottom: 0px;
right: 20px;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="HTMLでテキストの位置を設定する方法" >
<p id="p1">测试文本！测试文本！</p>
<p id="p2">测试文本！测试文本！</p>
</body>
</html>レンダリング:
説明:
position 属性 は、要素の配置タイプを指定します。
この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。
| Description | |
|---|---|
| 絶対位置の要素を生成します、静的配置以外の最初の親要素を基準にして配置されます。 要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。 | |
| #ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。 |
要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。 |
| 通常の位置を基準にして、相対的に配置された要素を生成します。 |
つまり、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。 |
| デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。 |
要素の上端を指定します。このプロパティは、位置決めされた要素の上マージン境界とその要素を含むブロックの上境界の間のオフセットを定義します。 相対定義要素の場合、上と下が両方とも auto の場合、計算値は両方とも 0 になります。一方が auto の場合は、もう一方の反対の値が取られます。どちらも auto でない場合は、下が計算されます。 top の値の逆数になります。
bottom 属性要素の下端を指定します。このプロパティは、位置決めされた要素の下マージン境界とその要素を含むブロックの下境界の間のオフセットを定義します。 絶対配置要素の場合、bottom 属性は、それを含む要素の下端の上/下に単位を設定します。相対的に配置された要素の場合、bottom 属性は要素の下端を通常の位置の上/下の単位で設定します。
left 属性要素の左端を指定します。このプロパティは、位置決めされた要素の左マージン端と、その要素を含むブロックの左端の間のオフセットを定義します。
right 属性要素の右端を指定します。このプロパティは、位置決めされた要素の右マージン端と、その要素を含むブロックの右端の間のオフセットを定義します。 静的要素の場合は自動、長さの値の場合は対応する絶対長さ、パーセント値の場合は指定された値、それ以外の場合は自動です。相対的に定義された要素の場合、左は常に右に評価されます。
推奨チュートリアル:
html ビデオ チュートリアル以上がHTMLでテキストの位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。