在另一个没有尺寸的情况下垂直/水平居中图像

Posted 2023-03-06

【中文标题】在另一个没有尺寸的情况下垂直/水平居中图像

【英文标题】：center image vertically/horizontally over another without dimensions

【发布时间】：2013-02-28 18:43:40

【问题描述】：

我正在尝试使图像看起来有一个居中的播放按钮。但是，我不知道主图像的确切大小，因为它是动态生成的。

现在，叠加图像（播放按钮）位于左上角。如何让播放按钮水平和垂直居中显示？

谢谢。

<div class="videobox">
<img src="/mainimage.png">
<span></span>
</div>

.videobox  position: relative; 

.videobox span 
position:absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: transparent url(../img/elements/playbutton.png) no-repeat;

【参考方案1】：

.videobox span 
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: url(../img/elements/playbutton.png) no-repeat center center;

【讨论】：

如果您的网站是响应式的，因此图像大小是动态的，您可以添加例如“background-size: 35%;”使播放按钮的大小相对于图像的大小。

@up 请记住，背景大小必须在背景之后。此外，上面的代码仅将播放按钮垂直居中。要使其水平居中，我必须将“display：inline-block”添加到问题中的 .videobox 规则中。检查jsfiddle.net/t0u1j2th/1。