使用flex在图像上垂直对齐文本？

none 发表于 Dev

没有任何

我想用flex在图像上垂直对齐文本。那可能吗？文字必须在另一个下方... https://jsfiddle.net/e3x8dw1d/这是我的小提琴。

<div class="advertisement">
    <img src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg" />
            <div class="advertisment_text">
                <div class="advertisement_title">Your ad can be here</div>
                <div class="advertisment_subtitle">ADVERTISE WITH </div>
            </div>
</div>

G-西里尔

您需要设置flex-flow为column（或flex-direction）：

.advertisement {
  float: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}
.advertisement img {
  width: 100%;
  height: 100%;
}
.advertisment_text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-flow:column;
  justify-content: center;
  align-items: center
}

/* below no width neede , but eventually margins or padding */
.advertisement_title {
  font-family: 'PlayfairDisplay-Regular';
  font-size: 36px;
  color: white;
  /*margin:auto 1em;*/
}
.advertisment_subtitle {
  font-family: 'proximanova-semibold-webfont';
  color: white;
  font-size: 13px;
  /*margin:auto 1em;*/
}

<div class="advertisement">
  <img src="http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg" />
  <div class="advertisment_text">
    <div class="advertisement_title">Your ad can be here</div>
    <div class="advertisment_subtitle">ADVERTISE WITH SKYMO</div>
    </div

https://jsfiddle.net/e3x8dw1d/4/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。