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.
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.