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

Question

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

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

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

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

Answer 1

首先，您的<div id="content" /> 是一个ID，而不是一个类。因此，将 CSS 中的 .content 更改为 #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;
}