仅使用auto或％对齐中间的div内容

Question

我在这里遇到了一些问题..我为此尝试了很多不同的修复，但它们似乎都没有。我想在另一个div的中间对齐div的内容。

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

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

如果有人可以帮助我。谢谢！

Answer 1

嗯，首先，你的<div id="content" />是一个ID，而不是一个类。因此，请将CSS中的.content更改为#content。其次，浮动抛出了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;
}