Question

我有一个div，我需要在另一个div下显示，但在页面大小改变时将其水平对齐。更改页面大小会更改第一个div的大小。

我想将.div2放在.div1下方并居中对齐。

我已创建a fiddle以更清楚地显示我要查找的内容。

HTML

<div class="container">
    <img src="http://jamesonstarship.files.wordpress.com/2013/10/beautiful-cat-cats-16096437-1280-800.jpg" />
    <div class="floating-container">
        <div class="floating" style="left:36%;top:26%;width:6%;height:9.5%;">
            <div class="div1">
            </div>
            <div class="div2">
                There is some content here
            </div>
        </div>
        <div class="floating" style="left:55%;top:38%;width:5%;height:8%;">
            <div class="div1">
            </div>
            <div class="div2">
                There is some content here
            </div>
        </div>
    </div>
</div>

CSS

.container {
    width:100%;
    display: inline-block;
    position: relative;
}

.container img {
    width:100%;
}

.floating {
    position:absolute;
}

.div1 {
    border: 3px solid #FFF;
    border-radius: 3px;
    width: 100%;
    height: 100%;
}
.div2 {
    background: rgba(255,255,255,0.4);
    width: 75px;
}

现在已经试图解决这个问题几个小时了，所以非常感谢一些帮助！

Answer 1

作为一个纯CSS解决方案，您可以对% width元素的<div>使用margin-left值，为第二个div设置负.div1 { width: 100%; } .div2 { width: 300%; margin-left: -100%; /* <-- (300% - 100%) / 2 | | width of the current div -- -- width of the first div */ }，如下所示：

.div1 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

此外，您需要使用box-sizing: border-box;作为第一个div来计算元素的宽度/高度，包括白色边框：

.div3

以下是 WORKING DEMO 。

具有固定宽度的Div

有两个选项来保留第二个div （我为演示创建一个名为width的新类，它有一个固定的{{1}在中心。

1）使用CSS3 calc()函数计算左边距的正确值。

.div3 {
    width: 150px;
    margin-left: calc((100% - 150px) / 2); /* <-- -1 * (150px - 100%) / 2 */
}

<强> UPDATED DEMO

2）使用CSS3 translateX()转换函数，其中负值百分比值为-50%，而元素位于left: 50%;

.div3 {
    width: 150px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

<强> UPDATED DEMO

Answer 2

你希望文本div（div2）在白框（div1）下面居中，并且从我的代码中我可以理解，你想要div2固定75px大小和div1变量，百分比位置和大小？ CSS不是我的强项，但我不认为你能用纯CSS做到这一点。所以我只能建议像这样的jQuery解决方案：

$(".div2").each(function(){
$(this).css('margin-left',(($(this).prev().width()-$(this).width())/2));
});

还要确保在窗口上添加此功能，如下所示：

$(window).on('resize', function(){
$(".div2").each(function(){
$(this).css('margin-left',(($(this).prev().width()-$(this).width())/2));
});
});

HERE是演示

如果有人知道如何使用纯CSS执行此操作，或者有更好的解决方案，请免费分享。

在较小的div内水平对齐div

2 个答案:

具有固定宽度的Div