html - 仅使用 auto 或 % 在中间对齐 div 内容

Question

我在这里遇到了一些问题.. 我已经尝试了很多不同的修复方法，但似乎都不起作用。我想将一个 div 的内容对齐到另一个 div 的中间。

我只想使用 auto 或 % 值，因为我想使网站也适用于移动设备。

这是我目前的代码:http://codepen.io/anon/pen/xHpaF/我想让那些红色框与 wrap div 的中心对齐。

如果有人能帮助我。谢谢!

Answer 1

嗯，首先，你的 <div id="content" />是一个ID，不是一个类。所以改变你的.content在 CSS 中为 #content .其次， float 抛出 text-align: center; .如果删除它，并将其设置为 display: inline-block; ，它应该可以解决您的问题:

在这里查看:http://codepen.io/anon/pen/ncviE/

CSS 更改:

#content {
  width:auto; 
  height:250px; 
  margin:0 auto; 
  background:#0C0; 
  display:table-cell; 
  text-align:center;
}

.view {
   display: inline-block;
   float: none;
}