问题描述
如果图片/视频大小改变,我如何保持播放按钮居中?
.image {
position:relative;
width:500px; // changed
height:300px;
}
HTML本质上是您的:
code>< div class =image ex1>
< a href =#>
< img src =http://placehold.it/200x150alt =video>
< span class =play>
< span>< / span>
< / span>
< / a>
< / div>
我使用的演示图片具有可配置的尺寸,例如200x150, p>
示例1 - 图片大小决定父容器的大小
code> .ex1.image {
position:relative;
display:inline-block;
margin-left:50px;
}
.image a {
display:inline-block;
position:relative;
}
/ *获取除了内联元素之外的额外空白空间* /
.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 :相对;
display:block;
width:auto;
height:200px;
text-align:center;
}
.ex3.image a {
margin-top:25px;
}
How can I keep the play button centred even if the the image/video size changed?
.image{
position:relative;
width:500px; //changed
height:300px;
}
Here is my example...
Attention: my images/videos haven't no specific size, so they can change according to their own size... This is just an example!
I set up three examples to show how you could solve this problem.
Please see the fiddle: http://jsfiddle.net/audetwebdesign/mxSkQ/
The HTML is essentially yours:
<div class ="image ex1">
<a href="#">
<img src="http://placehold.it/200x150" alt="video">
<span class="play">
<span></span>
</span>
</a>
</div>
I am using a demo image with configurable dimensions, 200x150 for example, easily changed for testing.
Example 1 - Image Size Determines Size of the Parent Container
.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;
}
If you want the .image
div to shrink to fit the image, use inline-block
to display.The margin-left
is optional, will depend on the rest of the layout.
Important: To center the play button motif, simply set the a
tag to display as inline-block
and your arrow-motif-span will position itself nicely.
Because img
is an inline element, browsers insert a small space after it that can show up if you have borders or backgrounds. Use vertical-align: bottom
to clean that up.
Example 2 - Parent Container Has A Specified Width
You can specify a width for the .image
parent container and then use text-align
to position the image element.
.ex2.image {
position: relative;
display: inline-block;
width: 400px;
height: auto;
text-align: center;
}
Example 3 - Parent Container Has Full Width and Specified Height
In this example, I let the parent container fill up the width of the window and set theheight to 200px. To get vertical centering, I set margin-top
to a hard-coded value that will depend on the height of the image. If you let the image take on a fixed height, this example is useful.
.ex3.image {
position: relative;
display: block;
width: auto;
height: 200px;
text-align: center;
}
.ex3.image a {
margin-top: 25px;
}
这篇关于播放按钮以不同的图像/视频大小为中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!