CSSでテキストの配置を設定する方法

設定方法: 1. text要素に「text-align: justify;」スタイルを追加; 2. 「justify-content: space-around;」または「justify-content: space-between」を追加テキスト要素 ;" スタイルに。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

方法 1: text-align 属性を使用する

次の HTML があるとします。

<p>这世间唯有梦想和好姑娘不可辜负！</p>

それにスタイルを追加します

p{
  width:500px;
  border:1px solid red;
  text-align: justify;
  }

最初の効果は次のとおりです

text-align: justifyこれは何ですか? CSS2 では、text-align の属性値は justify で、これは位置揃えを意味します。達成される効果は、テキスト行を両端に揃えて表示できることです (テキストの内容は 1 行を超える必要があります)。

しかし、これを使用するだけではまだ役に立ちません...

テキストを両端で揃えるには、&lt などのインライン空タグを使用する必要があります。 ;span>、<i></i> など、ここでは i## に <i></i>

タグ

<p>这世间唯有梦想和好姑娘不可辜负！<i></i></p>

を使用します。 # ラベル設定は次のとおりです。

p i{
  display:inline-block;
  /*padding-left: 100%;*/
  width:100%;}

padding-left: 100% と width:100% で効果を実現できます。どちらかを選択するだけです。効果は次のとおりです。

方法 2: justify-content 属性を使用します。

新しいフレックス レイアウトの下で、 CSS3 には justify-content プロパティがあり、このプロパティはフレックス項目の水平方向の配置を制御できます。両端の位置合わせを実現できる 2 つの値があります。

ただし、justify-content には互換性の問題があり、IE10 以降、FF、Chrome でサポートされています。すべてのブラウザは text-align 属性

#justify-content: space-around をサポートしています。フレックス項目はフレックスコンテナ内に均等に分散され、両端の半分のスペースが残ります。

コンテンツの位置を調整: 間のスペースを指定します。フレックス アイテムはフレックス コンテナ内に均等に配置され、最初のフレックス アイテムがフレックス コンテナの左端に、最後のフレックス アイテムがフレックス コンテナの右端に配置されます。

(学習ビデオ共有:

css ビデオ チュートリアル

)

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