Question

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

我试图将按钮中的图标与标签对齐，按钮旁边的文字完美对齐。我编写的CSS代码 - ＆＃39; top：0;＆＃39;，＆＃39; padding：0;＆＃39;，＆＃39; display：block;＆＃39;，＆＃39; display：内联块;和＆＃39; vertical-align：middle;＆＃39;这些对我没有用。我错过了什么？

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属性关系密切。只需稍微调整一下。此外，如果它们具有相同的样式属性，则无需添加不同的类名。

＆＃13;

@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; 
    }

＆＃13;

<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>

＆＃13;

平行对齐图标和文本

3 个答案: