Question

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

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

Here是我的榜样......

注意：我的图片/视频没有特定尺寸，因此可以根据自己的尺寸进行更改......这只是一个例子！

Answer 1

我设置了三个示例来说明如何解决此问题。

请看小提琴：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，您的箭头图案范围就会很好地定位。

由于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;
}

Answer 2

你需要

top: 50%;
left: 50%;
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)

http://jsfiddle.net/nGKcn/13/

尝试播放图像尺寸/不同图像。

Answer 3

给图像CSS：

display: block;
margin: 0 auto;

这只是你把东西放在中间的一般方式。

除非我遗漏了某些东西？

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

3 个答案: