播放按钮以不同的图像/视频大小为中心 [英] Play button centred with different image/video sizes

问题描述

如果图片/视频大小改变，我如何保持播放按钮居中？

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

这里是我的例子...

注意：我的图片/视频没有特定大小，这个只是一个例子！

解决方案

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

请参阅小提琴： http：// jsfiddle。 net / audetwebdesign / mxSkQ /

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 the height 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;
}

这篇关于播放按钮以不同的图像/视频大小为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！