After making two div elements inline-block, and then vertical-align: top, I'm left with an image which was originally centered both vertically and horizontally within the div, at the top left-hand side. Here is the code:
.soundscapeImgDiv {
/* background-color: white; */
background-image: url('../images/testImg.png');
background-size: 100%;
background-repeat: no-repeat;
width: 260px;
height: 85%;
margin-left: 10px;
margin-top: 12px;
border-radius: 12px;
/* text-align: center; */
display: flex;
align-items: center;
justify-content: center;
display: inline-block;
vertical-align: top;
}
.portalInfoDiv {
background-color: White;
margin-left: 10px;
height: 71px;
width: 56%;
display: inline-block;
vertical-align: top;
}<div class="bottomPlayerDiv"><div class="soundscapeImgDiv"><!-- <div class="playerDiv"> --><img id="pause/playIcon" src="images/pause.png"><!-- </div> --><!-- <img id="soundscapeImg" src="images/testImg.png" width="100%"> --><!-- <img id="pause/playIcon" src="images/pause.png"> --></div><div class="portalInfoDiv"><h1>Shanghai, China night lols</h1><p>somethingsGuy • 5 days ago</p></div></div>How can I center it like before?
Current Vs intended:
