css - 播放按钮以不同的图像/视频大小为中心

Question

即使图像/视频大小发生变化，如何让播放按钮保持居中？

.image{
    position:relative;
    width:500px; //changed
    height:300px;
}

Here是我的榜样...

注意:我的图片/视频没有具体的尺寸，所以他们可以根据自己的尺寸改变...这只是一个例子!

Answer 1

我设置了三个示例来展示如何解决这个问题。

请看 fiddle :http://jsfiddle.net/audetwebdesign/mxSkQ/

HTML 本质上是您的:

<div class ="image ex1">
    <a href="#">
        <img src="http://placehold.it/200x150" alt="video">
        <span class="play">
            <span></span>
        </span>
    </a>
</div>

我使用的是可配置尺寸的演示图像，例如 200x150，可轻松更改以进行测试。

示例 1 - 图像大小决定父容器的大小

.ex1.image {
    position: relative;
    display: inline-block;
    margin-left: 50px;
}

.image a {
    display: inline-block; 
    position: relative;
}

/* Gets rid of the extra white space that follows an inline element*/
.image img {
    vertical-align: bottom;
}

如果您希望.image div 缩小以适合图像，请使用inline-block 来显示。 margin-left 是可选的，将取决于布局的其余部分。

重要提示:要使播放按钮主题居中，只需将 a 标记设置为显示为 inline-block 和您的箭头主题- span 会很好地定位自己。

因为 img 是一个内联元素，浏览器会在它后面插入一个小空间，如果您有边框或背景，它会显示出来。使用 vertical-align: bottom 清理它。

示例 2 - 父容器具有指定宽度

您可以为 .image 父容器指定宽度，然后使用 text-align 定位图像元素。

.ex2.image {
    position: relative;
    display: inline-block;
    width: 400px;
    height: auto;
    text-align: center;
}

示例 3 - 父容器具有完整宽度和指定高度

在这个例子中，我让父容器填满窗口的宽度并设置 高度为 200px。为了获得垂直居中，我将 margin-top 设置为一个硬编码值，该值取决于图像的高度。如果您让图像采用固定高度，则此示例很有用。

.ex3.image {
    position: relative;
    display: block;
    width: auto;
    height: 200px;
    text-align: center;
}

.ex3.image a {
    margin-top: 25px;
}