CSSを使用してdivの下部にテキストを配置する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

王林

Nov 27, 2020 am 11:28 AM

cssdiv文字

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

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

#このチュートリアルの動作環境: 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 チュートリアル

以上がCSSを使用してdivの下部にテキストを配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。