Question

我似乎无法通过在线找到的解决方案来解决我的问题。图片根本不会动。

我希望将图像垂直放置在div中。因此，它不是从上到下显示，而是从中间的某个地方开始。

HTML

<article class="banner">
    <button class="button">Schedule your FREE assesment</button>
    <img class="mySlides" src="images/img1.jpg" width="100%">
    <img class="mySlides" src="images/img2.jpg" width="100%">
    <img class="mySlides" src="images/img3.jpg" width="100%">
    <img class="mySlides" src="images/img4.jpg" width="100%">
</article>

CSS

.banner {
    position: relative;
    background-color: #212121;
    height: 180px;
    width: 100%;
    overflow: hidden;
    opacity: .80
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button {
    position: absolute;
    margin-left: -14%; /* Anyway to make this centered more eficiently? */
    margin-top: 5%;
    border: 0;
    background-color: #C60505;
    color: white;
    padding: 15px 25px;
    font: Arial-Heavy;
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
    text-shadow: 1px 1px #000000;
}

值得一提的是，图像上附加的类链接到JS，具有类似于幻灯片的效果。

Answer 1

.button应该具有以下设置以使其居中（垂直和水平）：

.button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

此操作将button的左上角移至其父元素的正中间（使用top和left 50％），然后将其向左上移50％它自己的宽度和高度（使用transorm参数），因此将其居中在父元素内。

如果您确实只想垂直居中，请仅使用top: 50%;和transform: translateY(50%)。

将溢出图像垂直居中

1 个答案: