問題

CSSを使用して別の<div>内に<div>を水平に配置するにはどうすればよいですか?

 <div id="outer">  
  <div id="inner">Foo foo</div>
</div>
 

  ベストアンサー

このCSSを内側の<div>に適用できます。

 #inner {
  width: 50%;
  margin: 0 auto;
}
 

もちろん、width50%に設定する必要はありません。含まれている<div>よりも小さい幅は機能します。 margin: 0 autoは実際のセンタリングを行います。

IE8 +をターゲットにしている場合は、代わりにこれを持つ方が良いかもしれません。

 #inner {
  display: table;
  margin: 0 auto;
}
 

内側の要素を水平に中央に配置し、特定のwidthを設定せずに動作します。

ここでの実例:

 #inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
} 
 <div id="outer">
  <div id="inner">Foo foo</div>
</div> 

  同じタグがついた質問を見る

htmlcssalignmentcentering