HTMLでテキストを下向きに設定する方法-htmlチュートリアル-php.cn

HTMLでテキストを下向きに設定する方法

藏色散人

リリース： 2023-01-03 09:25:34

オリジナル

21110 人が閲覧しました

HTML でテキストを下向きに設定する方法: 最初に HTML サンプルファイルを作成し、次に本文にテキストコンテンツを定義し、親要素に CSS 属性「position:relative」を設定します。最後に、テキストが格納されている子要素の css 属性を「boottom:0」に設定するだけです。

HTMLでテキストを下向きに設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3、Dell G3 コンピューター

1. テキストまたはその他のブロックレベルの場合要素。ポジショニングのアイデアを活用します。位置: 絶対、次に下位: 0。親要素は、position:相対に設定する必要があります。

絶対配置は、最も近い非静的に配置された要素を基準とするためです。ただし、同じ親要素内に複数の要素があり、絶対位置で移動する必要がある場合、これを直接実行すると、それらの要素が float のように通常どおりに配置されずに重なってしまうことに注意する必要があります。

これは、これらの要素が同じ親要素を持っているためです。絶対配置を使用すると、元の位置に留まらず、親要素の左側に移動します。

この状況を解決するには、移動する必要がある要素の親要素をネストし、その親要素に配置して、親要素に対して相対的に設定する必要があります。これにより、元の親要素がマスター要素になります。

このように、絶対位置と位置属性を設定した後は、親要素の制限内で移動し、脱出できないため、重複する効果はありません。この方法だと重ならずに下の方に残りますが、注意が必要です。

新しいネストされた親要素には、内部要素よりも高い固定高さが必要です。そうしないと、彼の身長は内部要素によって伸びてしまいます。

[推奨: HTML ビデオチュートリアル ]

例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#txt{ 
 
 height:300px;
 width:300px;
 border:1px solid #333333;
 text-align:center;
 position:relative 
 
}
#txt p{
 position:absolute;
 bottom:0px;
 padding:0px;
 margin:0px
}
</style>
</head> 
 
<body>
<div id=txt>
<p>文字靠下</p>
</div>
</body>
</html>

ログイン後にコピー

レンダリング:

HTMLでテキストを下向きに設定する方法

2. テキストの場合 (ブロックレベルの要素では試していません。後で試してください)。次に、表示するテキストをラップする div を設定する必要があります: table-cellvertical:bottom。このようにして、テキストが div の下部に追加されます。

例:

HTML:

<div>文字在div的底部对齐</div>

ログイン後にコピー

css スタイル:

div{
    width:200px;height:50px;  /*设置div的大小*/
    border:4px solid #beceeb; /*为了便于观察，显示出边框*/
    display:table-cell; 
    vertical-align:bottom;
    }

ログイン後にコピー

レンダリング:

HTMLでテキストを下向きに設定する方法