翻訳: CSS によりテキストの配置がスマートになります_html/css_WEB-ITnose

原文:

CSS でテキストをスマートに配置

CSS でテキストをよりインテリジェントに配置することについて考えたことはありますか?試すことはできますが、CSS の text-align プロパティの値を Smart または Smartly に設定することはできません。

例を見てみましょう

(翻訳者注: 左側はプロンプト テキストが少ない場合を示しており、1 行にすることができます。右側はプロンプト テキストが 2 行を超える場合を示しています。)

図の例では、テキストが複数行の場合、これを実現するために text-align: left を使用します。

簡単です。

次に、テキストが 1 行しかない場合は、テキストを中央揃えにする必要があります。

JavaScript を使用せずに純粋な CSS を使用してこれを実現できます:

 figure  {   width :  420px ;   border :  1px  solid  orange ;   padding :  10px ;   text - align :  center ;  /* Set text align to center */   float :  left ;   margin :  10px ;  }  figcaption  {   display :  inline - block ;  /* Set this element to inline-block */   text - align :  left ;  /* Set text align to left */  }  

Codepen デモ アドレス

これはどのように実現されるのでしょうか?

ここで実装できるのは、figure と figcaption だけでなく、e388a4556c0f65e1904146cc1a846bee などの dc6dce4a544fdca2df29d5ac0ea9906b 内のネストされた要素も有効です。

親コンテナを text-align: center に設定すると、親コンテナ内のすべてのインライン要素が水平方向に中央に揃えられます。

したがって、すべての子 inline 要素も inline-blocks のルールに従います。上の例では、figcaption をインライン ブロックに設定し、中央揃えにしています。

インラインブロック要素は、その内容に応じて、親要素の 100% まで幅が広くなることがわかっています (パディングと幅の設定なしを考慮して)。 figcaption のコンテンツのテキストが少ない場合、 text-align:center としての親要素の Figure 定義に基づいて中央に配置されます。 inline-block 要素の機能の詳細を確認するには、ここをクリックしてください。

figcaption 内のテキストが複数行の場合、その親要素である Figure の最大幅まで拡大されます。ここで、figcaption で定義された text-align: left により、テキスト コンテンツが左揃えになります。

実際には、figcaption は常に中央揃えですが、親要素の最大幅に達しているため、明確ではありません。

この投稿を楽しんでいただければ幸いです。Twitter @sharmavijay をフォローしてください。