0

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

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

这是我的例子...

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

4

3 回答 3

3

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

请看小提琴：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;
}

如果您希望.imagediv 缩小以适合图像，请使用inline-blockto display。这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;
}
于 2013-04-03T11:51:01.377 回答
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/

尝试使用图像大小/不同的图像。

于 2013-04-03T10:50:42.243 回答
0

给图像CSS：

display: block;
margin: 0 auto;

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

除非我错过了什么？

于 2013-04-03T10:43:26.840 回答