https://jsfiddle.net/magnix2k/z1sx03by/1/
My goal is to make sure that the icons in buttons, along with their labels and accompanying text, are perfectly aligned. Despite trying various CSS codes like 'top: 0;', 'padding: 0;', 'display: block;', 'display: inline-block;' and 'vertical-align: middle;', I'm unable to achieve the desired alignment. What am I overlooking?
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%;
}