CSSで文字を下に揃える方法

青灯夜游
リリース: 2020-12-21 11:25:26
オリジナル
31718 人が閲覧しました

CSS でテキストを下部に配置する方法: 1. テキストを含む要素コンテナーに「display:table-cell;ertical-align:bottom;」スタイルを設定します; 2. 位置決め属性 location を使用します。 to matchbottom テキストの位置を設定し、テキストの下揃えを実現するプロパティ。

CSSで文字を下に揃える方法

#このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「

css ビデオ チュートリアル

CSS でテキストを下部に配置する方法:

方法 1:

HTML 要素の作成

文字在div的底部对齐
ログイン後にコピー

CSS スタイルの追加

div{ width:200px;height:50px; /*设置div的大小*/ border:4px solid #beceeb; /*为了便于观察,显示出边框*/ display:table-cell; vertical-align:bottom; }
ログイン後にコピー

CSSで文字を下に揃える方法

方法 2:

div を使用してモジュールを作成し、p タグを使用してテキストを作成します。 div タグに class 属性を追加して、div タグと p タグのスタイルを設定します。

CSSで文字を下に揃える方法

css タグで、クラスを通じて div のスタイルを設定し、幅を 250 ピクセル、高さを 400 ピクセル、背景色をグレーとして定義し、position 属性を使用してdivを相対位置に設定します。

CSSで文字を下に揃える方法

次に、p タグのスタイルを設定し、position 属性を使用して p タグを絶対位置に設定し、bottom 属性を使用して p タグのテキストを位置に設定します。一番下に配置し、p タグの幅を 100 % に設定し、text-align 属性を使用してテキストを中央揃えにします。

CSSで文字を下に揃える方法

ブラウザで test.html ファイルを開いて効果を確認します。

CSSで文字を下に揃える方法

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。 !

以上がCSSで文字を下に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!