0

我有一个尺寸可变的 div，我需要在其容器内动态水平居中。这是当前的结构...

<div class="outer">
    <div class="inner">Sample</div>
</div>

...“内部” div 的高度和宽度取决于其内容，并且它需要在“外部” div 内水平居中（左右两侧的空间相等），这可能或可能没有固定尺寸（因此“内部”可能在“外部”div 的宽度内，或者可能溢出，但始终居中）。以下是我目前拥有的款式...

.outer {
    width: 10px;
    margin: 0 auto;
    position: relative;
}
.inner {
    position: absolute;
    bottom: 0;
}

...“外部”的属性可以很好地将其集中在它所包含的内容中，但是“内部”的属性使其与“外部”div 的左边缘对齐。

我为“内部”尝试了一些具有负边距和左/右值的选项，但它们似乎取决于固定的像素值，而我需要它的尺寸相对于其内容保持可变。

需要注意的是，“内部” div 需要绝对定位，因为它必须固定到“外部”的底部边缘（因此是“底部：0”），即使“外部”的高度比内。

这是一个正在运行的示例：http: //jsfiddle.net/bVC3J/

有人对我如何在不使用 JS 的情况下实现这一目标有任何想法吗？如果没有 CSS 解决方案，我对 JS 持开放态度，因此欢迎您作为最后的手段提出建议。谢谢。

4

1 回答 1

0

这可能会为您完成工作：http: //jsfiddle.net/fF3A4/1/

.outer {
    width:300px;
    height:300px;
    display:table-cell;
    background:#333;
    vertical-align:bottom;
    text-align:center;
}
.inner {
    width:200px;
    margin:0 auto;
    background:#ccc;
    display:inline-block;
}
于 2012-12-20T23:36:30.463 回答