が水平方向に3 H2の

Question

を中心に、私はHTMLを再フォーマットすることにより、ホワイトスペースを削除しようとした水平方向の中心に3つの<h2>要素

#container { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: 3em; 
 
} 
 

 
h2 { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 33%; 
 
    margin-left: auto; 
 
    margin-right:auto; 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    color: Black; 
 
    font-size: 18px; 
 
    background: #FDF3E7; 
 
    padding: 10px 20px 10px 20px; 
 
    border: solid #7E8F7C 3px; 
 
}

 <div id="container"> 
 
      <h2 class="header">Restaunt Name:</h2 
 
      ><h2 class="header">Phone #:</h2 
 
      ><h2 class="header">Star Rating:</h2> 
 
     </div>

を苦労しています。私もthis siteを使ってみました。私は3番目の要素をコンテナの中に置くことはできません。

更新：私はjcuenodのアドバイスに従った。これは、水平方向のセンタリングのブロックレベルの問題を解決したようですが、スタイリングを見て、私は今なぜヘッダーが結果と一致しているのだろうと思っています。ここで彼らは今のように見えます。

はH2年代は、それらが100％の幅でコンテナ全体に集中していることを考えると、コンテナの全体を占めるべきではないでしょうか。

Answer 1

問題

問題は、主に水平方向のスペースを（埋める幅を持っているということです。33% ）。しかし、あなたの<h2>要素は、paddingとborderを追加するので余分な水平スペースを占有します。

ソリューション

使用box-sizing次のように：

box-sizing: border-box; 

説明

MDNはbox-sizingためborder-box設定を説明します

幅と高さのプロパティは、コンテンツが含まれ、パディングとボーダー、しかしマージンではありません。

MDNには実験的に記載されていますが、very good browser supportがあります。

#container { 
 
    width: 100%; 
 
    height: 3em; 
 
} 
 
h2 { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 33%; 
 
    -webkit-border-radius: 5; 
 
    -moz-border-radius: 5; 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    color: Black; 
 
    font-size: 18px; 
 
    background: #FDF3E7; 
 
    padding: 10px 20px 10px 20px; 
 
    border: solid #7E8F7C 3px; 
 
}

<div id="container"> 
 
    <h2 class="header">Restaunt Name:</h2 
 
    ><h2 class="header">Phone #:</h2 
 
    ><h2 class="header">Star Rating:</h2> 
 
</div>

Answer 2

だけ#container要素にtext-align:center;を追加<h2>

Answer 3

ためdisplay: blockを使用しています。

h2の要素はinline-blockに設定されているため、コンテナの全幅を占めていません。だからセンタリングが効いていないのです。あなたは同じ行上のすべての要素が必要な場合

Answer 4

：

#container { 
 
    margin: 0 ! important; 
 
    padding : 0 ! important; 
 
    width: 100%; 
 
    height: 3em; 
 
    text-align:center; 
 
} 
 

 
h2 { 
 

 
    display: inline-block; 
 
    text-align: center; 
 
    width: 33%; 
 
    /*margin-left: auto; 
 
    margin-right:auto;*/ 
 
    -webkit-border-radius: 5; 
 
    -moz-border-radius: 5; 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    color: Black; 
 
    font-size: 18px; 
 
    background: #FDF3E7; 
 
    padding: 10px 20px 10px 20px; 
 
    border: solid #7E8F7C 3px; 
 
}

<form id="form" onSubmit={this.getRecommendations} type="text"> 
 
      <input id="zipInput" type="text" placeholder="Zip Code or City" ref="zip"/> 
 
      <input id="kindInput" type="text" placeholder="Food Type" ref="kind"/> 
 
      <button id="button" type="submit">Get Results!</button> 
 
     </form> 
 
     <div id="container"> 
 
      <h2 class="header">Restaunt Name:</h2>  
 
      <h2 class="header">Phone #:</h2> 
 
      <h2 class="header">Star Rating:</h2> 
 
     </div>