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

Question

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

我想只使用auto或%值,因为我想让网站也用于移动设备.

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

如果有人可以帮助我.谢谢!

Answer 1

嗯,首先,你<div id="content" />是一个ID,而不是一个类.所以将你.content的CSS改为#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;
}