html - 如何在所有屏幕宽度中将一个 div 的位置设置为具有相同位置的另一个 div

Question

[http://jsfiddle.net/w7r3gveg/]1

我有 4 个 facebook Logo ，我想在背景图片的底部居中。

div bg 为背景 div facebook 是 facebook 的标志。

我可以设置 bg div 的 facebook Logo 中心，但它没有响应。

我想在 bg div 上锁定 facebook Logo ，因此如果用户更改屏幕宽度或具有不同的屏幕宽度，facebook Logo 应锁定在与其他宽度基于 bg div 相同的位置。

Answer 1

试试这个

JsFiddle

http://jsfiddle.net/46psK/2983/

HTML

<div class="responsive-container">
    <div class="dummy"></div>

    <div class="img-container">
        <img src="http://s2.uploads.im/t/8LauQ.png" alt="" />
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    background-image: url("http://s2.uploads.im/t/VtT8j.png");
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
         background-position: center; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}