web-dev-qa-db-ja.com

「text-align：center」がspan要素で機能しない

HTMLとCSSをしばらく使用していないので、何かを忘れているかもしれませんが、何らかの理由で、「text-align」プロパティが設定された「style」タグが最も単純なコンテキストでも機能しません。私が持っているファイル全体を表示しようとしていますが、私の問題は、2つのコメントだけです。他のものについては心配しないでください。それは私が取り組んでいる小さな情熱プロジェクトのためのものです。

これがファイル全体です。私には、関連性も重要性もないものがたくさんあります。 2つのコメントのコードに注目してください。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>

</script>
</body>
</html>

「Coded by AnnualMelons」の部分は中央にあるはずですが、そうではありません。少なくとも私にとってはそうではありません。

ファイルの他の部分は関係がないことはわかっていますが、外部の問題である可能性があるため、表示することも考えました。

私はしばらくこれをしなかったので、私は愚かな間違いをしていると確信していますが、それはうまくいきません...そうです。それが役立つ場合に備えて、Firefoxを私のWebブラウザーとして使用しています。

ありがとう！

htmltext-align
11
KarteMushroomPandas

<span>要素は、デフォルトでは "inline" element です。意味が異なります ブロックレベルの要素 （<div><h1><p>など）スパンが占めるのはその内容

text-align: center IS機能しますが、（すべてのブロック要素と同様に）内容よりも幅が広い要素に適用します。

スパンを<p>要素に変更するか、スパンにdisplay: blockプロパティを指定することをお勧めします。

ここに示すJSfiddleを示します<span>とdisplay: block; text-align: centerを使用した<p>とtext-align: center;を使用して同じ効果が得られることを示します。

お役に立てば幸いです。

28
Morklympious

スパンではなく、pまたはdivを使用します。テキストはインライン要素であり、スパンも同様です。 text-alignが機能するためには、インラインコンテンツの中央に配置するために、ブロックレベルの要素（p、divなど）で使用する必要があります。

例：

<div style="text-align: center">Coded by AnnualMelons</div><br>
3
David
.span { 
       text-align: center;
       width: -webkit-fill-available;
      }

これでうまくいき、spanタグ内のテキストが中央に揃えられました。

1
Vivek Pandey

これをスタイリッシュに使う

margin-left: 50%;

例-

   <span style="margin-left: 45%;">Centered Text</span>
0
Shanaka Anuradha