ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してdivの下部にテキストを配置する方法

CSSを使用してdivの下部にテキストを配置する方法

王林オリジナル: 2020-11-27 11:28:587911ブラウズ

div の下部にテキストを配置する Css メソッド: これは、[#txt{position:relative;} #txt p などの、position 属性の相対位置指定と絶対位置指定を利用して実現できます。 {位置:絶対;}]。

#このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン。この記事はすべてのブランドのコンピューターに適用されます。

背景:

CSS には、テキストをコンテナの下部に配置するためのパラメータがありません。この問題を解決するには、position 属性の使用を検討してください。

(学習ビデオ共有:

css ビデオチュートリアル)

属性の紹介:

position 属性は要素 (静的、相対、絶対、または固定) を指定します。 ) 位置決め方法のタイプ。

属性値:

absolute 静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。
fixed ブラウザウィンドウを基準にして配置された、固定位置の要素を生成します。要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。
relative 通常の位置を基準にして、相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。
静的デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

例:

<!DOCTYPE HTML>
<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>aadsad</p>
</div>
</body>
</html>

CSSを使用してdivの下部にテキストを配置する方法

関連記事