Aligning Icons and texts in line equally - html

Question

https://jsfiddle.net/magnix2k/z1sx03by/1/
I'm trying to align the icons in buttons with the labels and the text next to the button aligned in line perfectly. CSS codes I wrote - 'top: 0;', 'padding: 0;', 'display: block;', 'display: inline-block; and 'vertical-align: middle;' these didn't work for me. What am I missing?
HTML
<div class="service-wrapper">
<div class="services">
<div class="button1"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn1">TECHNICAL SUPPORT</div>
<div class="text1"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button2"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn2">CUSTOMER SERVICES</div>
<div class="text2"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 50%;
display: flex;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text1 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button1 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.text2 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button2 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.iconBtn1{
max-height: 60%;
max-width: 60%;
}
.iconBtn2{
max-height: 60%;
max-width: 60%;
}

Answer 1

It's probably not the best solution but this certainly works:
.button1 img,
.button2 img {
transform: translateY(5px);
-ms-transform: translateY(5px);
-webkit-transform: translateY(5px);
}
Your code with my code implemented: https://jsfiddle.net/z1sx03by/3/

Answer 2

In .button1 and .button2 remove text-align: center and add display: flex, justify-content: center, align-items: center
https://jsfiddle.net/z1sx03by/4/
Since the buttons will be styled identically, you should create one common class and apply it to all. No need to create duplicate classes for each. Give it a shot... Hope this helps! :)

Answer 3

You were close with the display:flex css property. Just needed to tweak a little. Also, no need to add different class names if they are going to have same style property.
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px 10px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="service-wrapper">
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn">
<span>TECHNICAL SUPPORT</span></div>
<div class="text"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn"><span>CUSTOMER SERVICES</span></div>
<div class="text"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>