Question

我需要在父级中垂直和水平地居中多个元素。但是，这里有捕获 - 父母和孩子的宽度和高度都通过内联样式设置。

{{1}}

我找到了多种在线定位的解决方案（例如通过CSS表格）。但是我试过的没有一个能用于内联宽度/高度的元素。

（我知道内联样式是邪恶的，但在这种情况下，它不受我的控制）。

这里概括了它需要的样子（很明显，没有居中）：

http://jsfiddle.net/apyex2tu/50/

谢谢！

编辑：

理想情况下，中心将通过CSS执行。
我宁愿避免使用flex，因为那时我需要使用较旧的IE版本进行测试（这是一个很难的要求）。

Answer 1

只需将父显示设为表格单元格。

＆＃13;

.child {
    text-align: center;
    padding: 5px; margin: 4px auto;
    border: 1px solid blue;
}
.parent {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

＆＃13;

<div class="parent" style="height:300px;width:300px">
    <div class="child" style="width:60px">These</div>
    <div class="child" style="width:70px">items</div>
    <div class="child" style="width:180px">should be centered</div>
</div>

＆＃13;

Answer 2

使用表格行和表格单元格可以使中心对齐垂直和水平使用表格行为专利div，子项目将是表格单元格。如下面的代码

.child {
    border: 1px solid blue;
    display:table-cell;
    vertical-align:middle;
}
.parent {
    border: 1px solid black;
    display:table-row;
    vertical-align:middle;
    text-align:center;
}

Answer 3

只需添加

margin: 0 auto;

给你的孩子！

由于它们是具有固定宽度边距的块元素，因此自动将这些元素居中垂直居中添加一个包装器设置其高度，将其定位在50％并给它一个高度的一半的负边距！

A new fiddle for you

CSS：具有内联绝对宽度/高度的居中元素

3 个答案: