Question

您好我已经引用了此问题并尝试了其答案Flexbox Not Centering Vertically in IE

然而，我仍然不会在IE中居的按钮，它适用于所有其他浏览器。

这是HTML

<div class="captioned-video">
    <div class="video-container" data-module-dynamic="embed-video">
        <img src="img here"/>
        <button class="play" data-video="video url here"></button>
    </div>
    <div class="caption">
        <h3 class="caption__subhead">Caption Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>

我少了

.captioned-video {
    border: 1px solid @light-slate;
    padding: 20px;
    display: flex;
    flex-direction: column;

.video-container {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;

    img {
        flex: none;
    }

    iframe /*iframe is here because on btn click the img is swapped to this*/{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .play {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        border: none;
        background-color: rgba(200, 81, 8, 0.8);
        position: absolute;
        padding: 0;
        &:hover {
            transition: all ease 0.5s;
            background-color: rgba(200, 81, 8, 1);
        }
        &:after {
            content: "";
            position: relative;
            display: inline-block;
            border-style: solid;
            border-width: 20px 0 20px 30px;
            border-color: transparent transparent transparent white;
            top: 2px;
            left: 5px
        }
    }
}

.caption {
    .caption__subhead {
        color: @royal-blue;
        font-family: @headings-font-family;
        font-size: 14px;
    }

    p {
        font-size: 12px;
        font-style: @font-family-sans-serif;
    }
}
}

如果我检查按钮上的元素，我缺少什么，即ii不可见，但元素突出显示它似乎在图像下，可能是定位问题？

Answer 1

正如您在position: absolute上设置button一样，IE（并且很可能是Safari）不会像其他浏览器一样将其置于中心位置。

要解决此问题，请更新您的.play规则

.play {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: none;
    background-color: rgba(200, 81, 8, 0.8);
    position: absolute;
    top: 50%;                                /* added */
    left: 50%;                               /* added */
    transform: translate(-50%,-50%);         /* added */
    ...

Updated codepen

Stack snippet

＆＃13;

.captioned-video {
  border: 1px solid red;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.captioned-video .video-container {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.captioned-video .video-container img {
  flex: none;
}
.captioned-video .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.captioned-video .video-container .play {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: none;
  background-color: rgba(200, 81, 8, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
.captioned-video .video-container .play:hover {
  transition: all ease 0.5s;
  background-color: #c85108;
}
.captioned-video .video-container .play:after {
  content: "";
  position: relative;
  display: inline-block;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent white;
  top: 2px;
  left: 5px;
}
.captioned-video .caption .caption__subhead {
  color: blue;
  font-family: Arial;
  font-size: 14px;
}
.captioned-video .caption p {
  font-size: 12px;
  font-style: Arial;
}

＆＃13;

<div class="captioned-video">
    <div class="video-container" data-module-dynamic="embed-video">
        <img src="http://placehold.it/300/f99"/>
        <button class="play" data-video="video url here"></button>
    </div>
    <div class="caption">
        <h3 class="caption__subhead">Caption Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>

＆＃13;

原因在这里得到了很好的解释：

How to center absolutely positioned children of a flex container in Safari?

使用弹性框的居中按钮在IE

1 个答案: