問題

如何使用CSS水平中心另一個<div>中的<div>?

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

  最佳答案

您可以將此CSS應用於內部<div>:

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

當然,您不必將width設定為50%.任何寬度小於包含<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