HTMLのspanタグを中央揃えおよび右揃えにするにはどうすればよいですか? HTMLのspanタグのスタイル解析はこちら

この記事では主にHTMLのspanタグのテキストを中央揃えと右揃えにする方法について説明します。ここにもさまざまな例がありますので、一緒に見てみましょう

まず、その方法を見てみましょう。 HTMLのspan属性は中央揃えですか？

実際、スパンテキストを中央に配置する方法はたくさんあります。次のコード行をコードに挿入する簡単な方法があります:

style= "text-align:center; line-height: 18px; "

水平方向に中央揃え text-align:center;

行の高さを設定します line-height:18px; スパンの高さと同じにすると、テキストを垂直方向に中央揃えにすることができます（テキストは 1 行のみ）。

水平方向の中央揃えは非常に簡単で、text-align:center を設定するだけですが、垂直方向の中央揃えは常に不可解です。

以前は常にpadding-topを調整しようとしていましたが、時々うまくいきましたが、現在も同じことが起こります。高さの値が大きくない場合、padding-topは大きくなります。 DIV または SPAN 全体の高さ。

理論的にはvertical-alignのデフォルト値はtop-alignではなくbaselineであるべきだと考えていましたが、フォントにはline-height属性があり、明らかにそのデフォルト値は1文字と同じ高さであることを思い出しました。行の高さを変更しました DIV または SPAN の高さと同じになるように値を変更します。

このようにして、DIVとSPANのテキストが中央に縦に配置されます。

span タグの例を見てみましょう:

<style>
div {text-align:center;}
div dd,div dt {text-align:left;}
</style>
<div>
<dl>
<dd>111</dd>
<dt>11111111111111</dt>
<dd>222</dd>
<dt>222222222222222</dt>
</dl>
<span><a href="www.php.cn">水平居中</a></span>
</div>

この方法では、span タグのコンテンツがページの中央に表示されます。その効果は次のとおりです:

私たちが解決すべき次の問題は、アライメントをどのように修正するかです。

Webサイトを作成する際、div、li、spanにspan右揃えを追加することが多いです。例えば、記事一覧では、webページの読みやすさを高めるために右揃えにする時間を追加します。コード:

HTML は次のとおりです:

<ul class="news">
    <li>span右对齐,换行显示的解决方法<span>2010-8-26</span></li>
</ul>

css: .news ul li span{float:right;}

しかし、ブロックにスパンを追加すると、しばしば問題が発生します。 Web ページでプレビューすると右揃えになるのはなぜでしょうか。

非float要素とfloat要素が一緒の場合、非float要素が前にあるとfloat要素が分離してしまうので、spanがfloat:rightであってもテキスト表示はfloatになることが分かりました。 :none なのでスパンは除外されます。

HTMLのspanタグを折り返さずに右に揃える2つの解決策:

1. テキストの前にspanを表示する

<ul class="news">
    <li><span>2010-8-26</span>span右对齐,换行显示的解决方法</li>
</ul>

2. テキストをfloat:leftにする

<ul class="news">
<li><span class="fl">span右对齐,换行显示的解决方法<span><span class="fr">2010-8-26</span></li>
</ul>
.fl {float:left;}
.fr{float:right;}

2番目の方法は次のとおりです。 2 番目の方法は使用しない 1 つは単純な方法ですが、Web ページのコードを単純にするために、1 番目の方法を使用することをお勧めします。

以上、HTMLのspanタグを中央揃え・右揃えにする方法でした。ご質問等ございましたら、下記までお問い合わせください

【編集者のおすすめ】

基本タグをHTMLの相対パスに記述しますか? (使い方の紹介付き)

HTMLメタタグの役割とは何ですか? HTMLメタタグの使い方紹介

以上がHTMLのspanタグを中央揃えおよび右揃えにするにはどうすればよいですか? HTMLのspanタグのスタイル解析はこちらの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。