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

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

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

推奨: 「

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

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

方法 1:

HTML 要素の作成

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

CSS スタイルの追加

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

方法 2:

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

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

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

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

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

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

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