html&css_html/css_WEB-ITnose でのテキストの配置の問題

html&css を使用していると、テキストの配置に関する多くの問題に遭遇することがよくあります。次に少し難しい文字揃えの問題を紹介したいと思います。

導入効果は以下の図に示されています。

以下の図に示すように、可変長の 2 行のテキストを水平方向に中央揃えにしてから、2 行のテキストを左揃えにする必要があります。

簡単そうに聞こえますが、実行するのは難しいです。 。 。 。 。 。

間違ったアプローチ 1:

大きな div を使用して 2 つの div をラップし、大きな div に "text-align:center;" を設定し、小さな div に "text-align:left" を設定します。 ; "

結果は以下のようになります。

div は行全体を占有し、コンテンツのサイズに応じて幅を自動的に調整できないため、大きな div の幅を設定したい場合、長さが異なる場合は制御が簡単ではありません。段落が変更されると、中央揃えができなくなります。

間違ったアプローチ 2:

そこで、小さな div を Span に変更しました。これは、span はインライン要素であり、span 内の段落の幅に応じて幅を調整できるためです。結果を以下に示します。

span はそれ自体の幅を自動的に調整するため (つまり、span 幅は段落の長さに等しい)、「text-align:left;」は機能しません。

正しいアプローチ:

ブロックレベルの要素もインライン要素もこの効果を達成できないため、妥協点としてそれらの間の要素を使用できますか。

はい、「display:inline-block;」を設定するだけです。

レンダリングは次のとおりです:

アイデア: 大きな div に小さな div を配置し、小さな div には 2 つのスパン段落が含まれます。大きい div に「text-align:center;」を設定して小さい div を中央に設定し、小さい div にインライン要素の特性を持たせて幅を自動的に調整できるようにします。コンテンツに「text-align:left;」を設定して要素を左揃えにすれば完了です。

ヒント: 小さい div の span 要素は div などのブロックレベルの要素に置き換えることができ、小さい div は span などのインライン要素に置き換えることができます。

HTML コードは次のとおりです:

<div id="container">    <div id="child-container">        <span class="text">请尽快付款以保证商家能及时提供服务</span><br/>        <span class="text">未支付订单将在半个小时后关闭</span>    </div></div>

CSS コードは次のとおりです:

 1 *{ 2     margin: 0; 3     padding: 0; 4 } 5 #container { 6     text-align: center; 7     background-color: #DBEDFD;   //这三句只是为了美观，请忽略。。。 8     height: 40px; 9     padding: 15px 0;10 }11 #child-container {12     text-align: left;13     display: inline-block;14 }