Question

我的图像响应大小，我试图在其中心叠加一个播放图标。我可以垂直居中，但不能水平居中。

查看我的jsfidde

HTML：

<div class="img-container">
  <img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;">
  <div class="post-video-overlay-lg">
    <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
  </div>
</div>

CSS：

.post-video-overlay-lg {
  position: absolute;
  font-size: 72px;
  color: #E5E5E5;
  text-align: center;
  width: 100%;
}

.img-container {
  position: relative;
  width:315px;
  height:auto;
  display:block;
  margin:auto;
  cursor:pointer;
}

知道我缺少什么吗？

Answer 1

首先，你必须将叠加div放在图像/视频上......然后定位跨度。

＆＃13;

.post-video-overlay-lg {
    position: absolute;
    top:0;
    left:0;
    font-size: 72px;
    color: #E5E5E5;
    text-align: center;
    width: 100%;
    height: 100%;
}
.post-video-overlay-lg span {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

.img-container {
    position: relative;
    margin: auto;
    width:315px;
    cursor:pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.img-container img {
    display: block;
}

＆＃13;

<div class="img-container">
    <img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;" />
    <div class="post-video-overlay-lg">
        <span class="glyphicon glyphicon-play" aria-hidden="true"></span>

    </div>
</div>

＆＃13;

JSfiddle Demo

Answer 2

这是小提琴：http://jsfiddle.net/f1becapq/3/

更新了.post-video-overlay-lg

的css

.post-video-overlay-lg {
    position: absolute;
    font-size: 72px;
    color: #E5E5E5;
    text-align: center;
    left: 0;
    right: 0;
    top: -webkit-calc(50% - 36px);    /* 36px = 72px/2 */
    top: -moz-calc(50% - 36px);
    top: calc(50% - 36px);
}

使用CSS calc函数在运行时垂直对齐div

中心跨越图像上的div容器内部

2 个答案: