Question

我有一个div，里面有另一个div，在那个div中有3个<a> s。我希望内部div在外部div中水平对齐。

我怎样才能实现这个目标？

外部div（Footer_Column）必须有display: inline_block和vertical-align: middle

所以看起来像这样：

-----------------------------
|                           |
|     i'm a link            |
|     i'm a long link       |                         
|     i'm short             |
|                           |
-----------------------------

的 HTML 的

<div class="Footer_Column">
    <div class="Footer_Column_Inner">
        <a href="url1.com">i'm a link</a>
        <a href="url2.com">i'm a long link</a>
        <a href="url3.com">i'm short</a>
    </div>
</div>

的 CSS 的

.Footer_Column {
        display: inline-block;
        vertical-align: middle;
        width: 32.7%;
    }
        .Footer_Column_Inner{
            display: inline-block;
        }
        .Footer_Column a {
            display: block;
            font: 13px Trebuchet MS;
            color: #464646;
            text-decoration: none;
        }

非常感谢！

Answer 1

.Footer_Column_Inner {
  margin: 0 auto;
  display: table;  
}

无需指定宽度

Answer 2

这是一个小提琴：http://jsfiddle.net/piedoom/Jk32y/

我将解释CSS：

我将text align: center添加到父div中以使项目居中，因为子div是内联块。

然后，为了证明子div中留下的文本，我添加了text-align: left;

我添加了一些背景颜色以向您展示它是如何工作的，但您当然会删除颜色或将其设置为您需要的颜色。

希望这有帮助。

如何水平对齐以“阻止”div内的div？

2 个答案: