CODEWITHSUNDEEP
htmlcssflexbox
RogerFedFan
RogerFedFan

Reputation: 566

Align Text Center With Flexbox Column

I'm trying to position text under an image with the flex-direction: column; property dead stock in the middle but I have no idea how to achieve this. It spans the same height but instead of an image it is text. I've added a background colour to the text to help you better understand what I'm trying to go for.

.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;
}
<div class="test">
<div class="img1"></div>
  <div class="test2">
    <div class="img2"></div>
    <p>ProntoToronto</p>
  </div>
</div>

https://jsfiddle.net/rxa7m0gs/

Upvotes: 0

Views: 808

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

To center the text in the paragraph, use display: flex; justify-content: center; align-items: center;

.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;
}
<div class="test">
    <div class="img1"></div>
    <div class="test2">
    <div class="img2"></div>
    <p>ProntoToronto</p>
    </div>
</div>

Upvotes: 2

Related Questions