将图标和文本均匀对齐

Question

https://jsfiddle.net/magnix2k/z1sx03by/1/

我正在尝试将按钮中的图标与标签对齐，并且按钮旁边的文本完美对齐。我写的 CSS 代码 - 'top: 0;', 'padding: 0;', 'display: block;', 'display: inline-block;和“垂直对齐：中间；”这些对我不起作用。我错过了什么？

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

这可能不是最好的解决方案，但这确实有效：

.button1 img,
.button2 img {
          transform: translateY(5px);
      -ms-transform: translateY(5px);
  -webkit-transform: translateY(5px);
}

你的代码和我的代码实现了：https://jsfiddle.net/z1sx03by/3/

Answer 2

在.button1 和.button2 中删除text-align: center 并添加display: flex、justify-content: center、align-items: center https://jsfiddle.net/z1sx03by/4/ 由于按钮的样式相同，因此您应该创建一个通用类并将其应用于所有类。无需为每个创建重复的类。试一试...希望这会有所帮助！ :)

Answer 3

您与display:flex 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: 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>