Question

我希望使用flex在图像上垂直对齐文本。那可能吗？文字需要低于另一个...... https://jsfiddle.net/e3x8dw1d/ 这是我的小提琴。

CREATE OR REPLACE FUNCTION notify_change() RETURNS TRIGGER AS $$
    BEGIN
        SELECT pg_notify('test', TG_TABLE_NAME);
        RETURN NEW;
    END;
$$ LANGUAGE plpgsql;

Answer 1

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

＆＃13;

.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;*/
}

＆＃13;

<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

＆＃13;

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

Answer 2

我只编辑了你的CSS。将虎放在背景图像中，将文本放在它上面并使其居中：https://jsfiddle.net/qaeL0yvj/

    .advertisement{
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
  background-image: url('http://opusteno.rs/slike/desktop-pozadine/21289/slike-lava-desktop-t01.jpg');
  background-size: 1000px 500px;
  height: 500px;

}
.advertisement img{
    width: 100%;
    height: 100%;
}
.advertisment_text{
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  text-align: center;
  margin-top: 20%;
}

.advertisement_title{
    font-family: 'PlayfairDisplay-Regular';
    font-size: 36px;
    color: white;
    width: 100%;
}
.advertisment_subtitle{
    font-family: 'proximanova-semibold-webfont';
    color: white;
    font-size: 13px;
    width: 100%;
}

这有用吗？

干杯，皮尔

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

2 个答案: