Vertical align text along side image - Shopify

Alfie
August 22, 2020
220 views
2 votes
3 Answers

I have a Shopify store which has a split page in half with text on one side and an image on the other. I would like the text to be positioned so that it is on the middle of the image vertically. This is the code i am currently using:

<div class="image">
  </div>
<div class="textcontainer">
Some text which i would like centred
  </div>

.image {
   width: 58%;
   padding-top: 60%;
   margin-right: 2%;
   position: relative;
   float: left;
   position: relative;
   background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }

.textcontainer {
    width: 40%;
    position: relative;
    float: left;

Has anyone got any idea how i can do this. Many thanks.

Answers

I think this should work

<style>
.container {
    position: relative;
}

.textcontainer {
    position: absolute;
    top: 50%;
    left: 50%; // add this if you want it to horizontally align too
    transform: translateY(-50%); // use this for vertical align only
    transform: translate(-50% -50%) // use this for both vertical & horizontal align
}
</style>

<div class="container">
    <div class="image"></div>
    <div class="textcontainer">
        Some text which i would like centred
    </div> 
</div>

<style>
 .image-container{
     width: 300px;
     height: 300px;
     display: flex;
     align-items: center; //vertical center
     justify-content: center; //horizental center
 }
 .image-container img{
     width: 100%;
     height: auto;
 }
 .image-container p{
     position: absolute;
 }`enter code here`
</style>
<div class="image-container">
    <img src="https://fakeimg.pl/300/">
     <p>vertical text</p>
</div>

wrap your image and text in div .container, and set the rules for flex and align-item center.

.container {
  display: flex;
  align-items: center;
}

.image {
   width: 58%;
   padding-top: 60%;
   margin-right: 2%;
   position: relative;
   float: left;
   position: relative;
   background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }
.textcontainer {
    width: 40%;
    position: relative;
    float: left;
 }

<div class="container">
  <div class="image">
    </div>
  <div class="textcontainer">
  Some text which i would like centred
    </div> 
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Vertical align text along side image – Shopify

Answers