Aligning icon and text horizontally with html and css [duplicate] - html

Question

This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 4 years ago.
I am trying to align the icons and text within the boxes here:
I can't seem to get the "Store Locator" and icon to align horizontally.
Can anyone please help me achieve this?
My html:
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator <--- problem line
</div>
</div>

Answer 1

Try to use display:inline-flex here
#container {
text-align: center;
max-width: 960px;
margin: 0 auto;
}
.block {
width: 300px;
height: 120px;
margin: 10px;
display: inline-flex;
background: #3f3f3f;
border-radius: 5px;
font-size: 22px;
align-items: center;
justify-content: center;
}
#phone {
color: yellow;
}
#chat {
color: green;
}
#email {
color: white;
}
#store-locator {
color: grey;
}
.store {
background: url(http://s1.archerssleepcentre.co.uk/i/sprite-2015.svg) no-repeat center left;
background-position: -432px 2px;
position: relative;
right: 10px;
background-size: 1800% auto;
height: 32px;
width: 32px;
display: inline-block;
}
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator
</div>
</div>