将文本中心与Flexbox列对齐

Question

我尝试使用flex-direction：列在图像下定位文本;在中间的财产死股但我不知道如何实现这一目标。它跨越相同的高度，但不是图像，而是文本。我在文字中添加了背景颜色，以帮助您更好地理解我想要的内容。

＆＃13;

＆＃13;

BUCKET="s3://mysite-backup"
FILE=`aws s3 ls $BUCKET --recursive | sort | tail -n 1 | awk '{print $4}'`
echo $BUCKET
echo $FILE

/usr/local/bin/aws s3 cp $BUCKET/$FILE /data/restore_dir

＆＃13;

.test {
display: flex;
}

.img1 {
background-image: url(http://wallpaper-gallery.net/images/hd-model-wallpapers/hd-model-wallpapers-16.jpg);
 background-size: cover;
 margin: 40px;
 height: calc(100vh - 80px);
 background-position: center center;
 flex: 1;
 margin-right: 0px;
 margin-left: 40px;
}

.test2 {
display: flex;
flex-direction: column;
justify-content: center;
}


.img2 {
background-image: url(http://wallpaper-gallery.net/images/model-girl-hd-wallpaper/model-girl-hd-wallpaper-20.jpg);
flex: 1;
background-size: cover;
margin-bottom: 20px;
margin-right: 40px;
margin-left: 40px;
margin-top: 40px;
height: calc(50vh - 120px);
background-position: center center;
width: 50vw;
}

.test2 p {
flex: 1;
margin-top: 20px;
margin-bottom: 40px;
margin-left: 40px;
margin-right: 40px;
font-size: 140px;
height: calc(50vh - 120px);
background-color: aqua;
text-align: center;
}

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/rxa7m0gs/

Answer 1

要使段落中的文字居中，请使用display: flex; justify-content: center; align-items: center;

＆＃13;

＆＃13;

.test {
    display: flex;
}

 .img1 {
    background-image: url(http://wallpaper-gallery.net/images/hd-model-wallpapers/hd-model-wallpapers-16.jpg);
     background-size: cover;
     margin: 40px;
     height: calc(100vh - 80px);
     background-position: center center;
     flex: 1;
     margin-right: 0px;
     margin-left: 40px;
}

.test2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.img2 {
    background-image: url(http://wallpaper-gallery.net/images/model-girl-hd-wallpaper/model-girl-hd-wallpaper-20.jpg);
    flex: 1;
    background-size: cover;
    margin-bottom: 20px;
    margin-right: 40px;
    margin-left: 40px;
    margin-top: 40px;
    height: calc(50vh - 120px);
    background-position: center center;
    width: 50vw;
}

.test2 p {
    flex: 1;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
    font-size: 140px;
    height: calc(50vh - 120px);
    background-color: aqua;
    display: flex;
    align-items: center;
    justify-content: center;
}

＆＃13;

<div class="test">
    <div class="img1"></div>
    <div class="test2">
    <div class="img2"></div>
    <p>ProntoToronto</p>
    </div>
</div> 

＆＃13;

＆＃13;

＆＃13;