BinaryDevelop
  1. ホーム
  2. html

[解決済み] span要素で "text-align: center "が機能しない

2022-02-11 01:26:04

質問

しばらくHTMLやCSSをやっていないので、何か忘れているかもしれませんが、"style"タグに"text-align"を設定しても、なぜか最も単純な文脈でも機能しません。これから、私が持っているファイル全体をお見せしますが、私の問題は、私が持っている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"の部分は中央にあるはずなのですが、そうではありません。少なくとも私にとってはそうです。

他の部分は関係ないとは思うのですが、外部的な問題かもしれないので、お見せした方が良いかと思いました。

久しぶりにやったのでくだらないミスをしているのでしょうが、うまくいきません...そうなんです。一応、WebブラウザはFirefoxを使っています。

ありがとうございます。

解決方法は？

その <span> 要素は、デフォルトでは "インライン"要素 . とは異なり、以下のような意味です。 ブロックレベル要素 ( <div> <h1> <p> など) は、スパンだけで は、そのコンテンツと同じだけの水平スペースが必要です。

text-align: center ISは機能していますが、コンテンツより大きな幅を持たない要素に適用しています（すべてのブロック要素がそうであるように）。

スパンを <p> 要素を指定するか、あるいは display: block プロパティで指定します。

以下は、JSfiddleによるデモです。 というのは <span> と display: block; text-align: center と <p> と text-align: center; も同じ効果を得ることができます。

お役に立てれば幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します