html - 居中对齐重叠图像

Question

我需要将播放按钮图像对齐到另一个图像的中心。

当标题很长时，我的例子就坏了。

我们如何才能在大图像上准确对齐蓝色图像

Fiddle

<div class="video-item-wrapper">
    <div class="video-image-wrapper">
        <img src="http://placehold.it/600x400" class="img-responsive" />
    </div>
    <div class="play-item-wrapper">
        <img src="http://placehold.it/50.png/09f/fff&text=>" />
    </div>
    <div class="video-details-wrapper"> <span>this is video short video title</span>

Answer 1

只需将您的 play-item-wrapper 放入容器 video-image-wrapper 并在其上添加相对定位即可。

<div class="video-item-wrapper">
        <div class="video-image-wrapper">
            <img src="http://placehold.it/600x400" class="img-responsive" />

            <div class="play-item-wrapper">
                <img src="http://placehold.it/50.png/09f/fff&text=>" />
            </div>
        </div>
        <div class="video-details-wrapper"> 
            <span>this is video short video title</span>
        </div>
</div>

在 CSS 中

.video-image-wrapper { position: relative; }

JSFiddle:https://jsfiddle.net/L51bd8vr/