Aligning Icons and texts in line equally

0
votes

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%;
}
3
htmlcss

3 Answers

2
votes

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/

2
votes

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! :)

1
votes

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>