Shopify Question posted in
The Shopify help center can be found here.

Aligning 3 images with text – Shopify

I’m fairly inexperienced with CSS but having to fix something and couldnt find quite the right answer so here I am!

Basically I am trying to add 3 images with text to the right of the , with the text centre aligned to each image. I’ve sat scrolling through various block/display modes but clearly I’m doing something wrong.

Here is the HTML I have so far:

<div id="store-info">
<img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_01.png?v=1620843727">TEL: 000-00000-000
<img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_03.png?v=1620843727"><a href="/account/login" title="/account/login">TRACK PACKAGE</a><img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_05.png?v=1620843727"><a href="/pages/contact-us" title="/pages/contact-us">EMAIL US</a>
</div>

Which produces the following: https://nimb.ws/JVojrA

Sorry for the beg, but I am basically stabbing in the dark at various display/block options and going nowhere.

Tags:

2

Answers


  1. 0

    Adding CSS "Flex" and "Flew-flow" will do the trick;

    But, I do recommended to look at Bootstrap "flex" and "Grid System" for more detail;
    Bootstrap Grid System

    #store-info {
  display: flex;
  flex-flow: column;
}
#store-info img {
  width: 100px;
}
#store-info img, #store-info a,  #store-info span {
  margin-left: 5%;
  margin-bottom: 5%;
}
    <div id="store-info">
   <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_01.png?v=1620843727"><span>TEL: 000-00000-000</span>
  
  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_03.png?v=1620843727">
   <a href="/account/login" title="/account/login">TRACK PACKAGE</a>

  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_05.png?v=1620843727">
  <a href="/pages/contact-us" title="/pages/contact-us">EMAIL US</a>
</div>
    Login or Signup to reply.
  2. 0

    sounds like you are looking for something like this. Flex is a great way of doing this.

    #store-info {
  display: flex;
  flex-direction:column;
  
}
#store-info img {
  width: 100px;
}
#store-info img, #store-info a,  #store-info span {
  margin-left: 5%;
  margin-bottom: 5%;
}

.items{
display:flex;
align-items:center;
}
    <div id="store-info">
<div class='items'>
   <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_01.png?v=1620843727">
   <span>TEL: 000-00000-000</span>
 </div>
 <div class='items'>
  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_03.png?v=1620843727">
   <a href="/account/login" title="/account/login">TRACK PACKAGE</a>
</div>
<div class='items'>
  <img style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/0565/3073/1187/files/footer_icons_05.png?v=1620843727">
  <a href="/pages/contact-us" title="/pages/contact-us">EMAIL US</a>
</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search