web-dev-qa-db-ja.com

text-align：センターが機能しない

答えを探してみましたが、うまくいきませんでした。段落を揃えようとしています。 CSSでコードを上書きしているものは何もないと確信しています。 HTMLとCSSは次のとおりです。

body {
  background-image: url("../../images/pic01.jpg");
  background-repeat;
}
#main {
  background-color: rgb(255, 84, 0);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  overflow: auto;
  height: 100%;
  color: rgb(255, 255, 255);
}
#center {
  text-align: center;
}
<body id="top">
  <div id="main">
    <p id="center">
      <h1> TEST </h1> 
    </p>
  </div>
</body>

ここでの間違いは何ですか？

htmlcsstext-align
5
Nedas Bolevičius

text-align: centerは、純粋なテキストノードと、display: inline;またはdisplay: inline-block;を持つ子要素に影響します。 assumed子要素はh1であり、デフォルトではdisplay: block;です。したがって、p内にh1を含めることが許可されていても、これは機能しません（たとえば、<p id="center">を<div id="center">に置き換えた場合）。 dはまだ「機能しない」センタリングに遭遇します）。

pは、いわゆるフレージングコンテンツのみを持つことができます。つまり、段落内の子要素として許可されるのは特定の要素のみです。

フローコンテンツ要素（例：h1）を使用すると、「周囲の」pタグが自動的に閉じられます。つまり、これはブラウザが実際にレンダリングするものです。

<div id="main">
    <p id="center"> </p>
    <h1> TEST </h1> 
</div>

最後にもう1つ、フロントエンドの初心者だと言ったからです。

CSSで#idセレクターを使用しないでください。代わりに、常にCSS .classesを使用してください。さらに進んだ場合は、その理由についてここで読んでください： http://oli.jp/2011/ids/

11
connexo

HTMLが無効です。 <p>に<h1>を含めることはできません。ほとんどのブラウザは、見出しの前の段落を閉じてから、その後に別の段落を作成することで、間違いを修正しようとします。

見出しまたは段落のいずれかを削除し、CSSを使用して必要に応じてスタイルを設定できます。

jsFiddleの例

2
j08691

text-aling: centerが機能するには、margin: autoオプションも渡す必要があります。

2
Alexander Luna

次のように、text-align: centerを#main h1に指定します。

#main h1 {
  text-align: center;
}

無効なHTMLである<h1>内で<p>を使用しましたが、ブラウザは<p></p>を開始する前に<h1>を閉じることで処理します。

以下のスニペットをご覧ください。

#main h1 {
  text-align: center;
}

body {
    background-image: url("../../images/pic01.jpg");
    background-repeat;
}

#main{
    background-color: rgb(255, 84, 0);
    width: 75%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;

    overflow:auto;
    height:100%;
    color: rgb(255, 255, 255);
}

#center {
    text-align: center;
}
<html>
    <head>
        <title>HTML PAMOKOS</title>
        <link rel="stylesheet" href="../assets/css/html.css" />
    </head>

    <body id="top">
        <div id="main">
            <p id="center"></p>
            <h1> TEST </h1>
        </div>
    </body>

</html>

お役に立てれば！

0
Saurav Rastogi