html - 上的文本使用 CSS

Question

我想在我的 4 张图片的中心显示文本。无论我做什么，它根本不显示或显示在页面顶部。

有人，请帮帮我!

顺便问一下，有人知道如何使横幅文本在缩放时始终保持不变(与 100% 时相同)吗？

更新:https://jsfiddle.net/5no1pjt2/4/

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

#banner {
    position: relative;
    width: 100%;
}

#banner img {
    width: 100%;
    height: 100%;
    float: left; /* no line after <img> */
}

#banner-text {
    position: absolute;
    margin: 250px 120px;
    font-size: 42px;
    color: #ffffff;
    /* background: rgba(0, 0, 0, 0.5); */
}

#banner-text p {
    width: 800px;
    /* font-family: Palanquin Regular; */
    font-size: 24px;
    line-height: 24px;
}


#img__wrap img {
    width: 50%;
    height: auto;
    /* display: inline-block; */
    float: left; /* no line after <img> */
    /* transition */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#img__wrap img:hover {
    /* filters for animation */
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
}



/* relevant styles */
#img__wrap {
  position: relative;

}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: visible;
  opacity: 0;


}

#img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

        <div id="banner">
            <img src="http://placehold.it/1920x1080"/>

            <div id="banner-text">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ultrices tellus, at        vulputate risus.Cras convallis molestie libero, ac fringilla lacus lobortis ut.
                </p>
            </div>

        </div>


    <div id="img__wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

Answer 1

关键是创建一个包装器来保存您的图像和文本。然后添加相对于该包装器的位置。然后在其中的文本中添加 top 50%，然后通过添加 transform translateY(-50%) 将其提升一半高度。如果您想要 X 轴相同，请使用 left 50% 和 translateX(-50%)。

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

#banner {
    position: relative;
    width: 100%;
}

#banner img {
    width: 100%;
    height: 100%;
    float: left; /* no line after <img> */
}

#banner-text {
    position: absolute;
    margin: 250px 120px;
    font-size: 42px;
    color: #ffffff;
    /* background: rgba(0, 0, 0, 0.5); */
}

#banner-text p {
    width: 800px;
    /* font-family: Palanquin Regular; */
    font-size: 24px;
    line-height: 24px;
}


#img__wrap img {
    width: 100%;
    height: auto;
    /* display: inline-block; */
    float: left; /* no line after <img> */
    /* transition */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#img__wrap img:hover {
    /* filters for animation */
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -o-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
}



/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    height: 40px;
    transform: translateY(-50%);
    text-align: center;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

.image-wrap {
  position: relative;
  width: 50%;
  float: left;
}

        <div id="banner">
            <img src="http://placehold.it/1920x1080"/>

            <div id="banner-text">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis ultrices tellus, at        vulputate risus.Cras convallis molestie libero, ac fringilla lacus lobortis ut.
                </p>
            </div>

        </div>


    <div id="img__wrap">
       <div class="image-wrap">
          <img class="img__img" src="http://placehold.it/952x512"/>
          <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </div>
       <div class="image-wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="image-wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="image-wrap">
        <img class="img__img" src="http://placehold.it/952x512"/>
        <p class="img__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>