整列アイコンとラインのテキストも同様に

Question

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

私は完全にラインに並んだボタンの隣のラベルとテキストとボタンのアイコンの整列しようとしています。 'top：0;'、 'padding：0;'、 'display：ブロック'、 'display：インラインブロック'、 ' and 'vertical-align：middle;'これらは私にとってはうまくいかなかった。私は何が欠けていますか？

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

あなたはdisplay:flex cssプロパティの近くにいました。ちょっと微調整するだけでした。また、同じスタイルプロパティを持つ場合、異なるクラス名を追加する必要はありません。 .button1と.button2で

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); 
 

 
    html, body, #container { 
 
    font-size: 18px; 
 
    margin: 0; 
 
\t padding: 0; 
 
\t height: 100%; 
 
\t font-family: 'Source Sans Pro', sans-serif; 
 
    } 
 

 
    p { 
 
\t line-height: 18px; 
 
\t 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; 
 
\t 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>

Answer 2

それはおそらく最良の解決策ではないのですが、これは確かに動作します：

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

実装私のコードとあなたのコード：https://jsfiddle.net/z1sx03by/3/

Answer 3

ボタンが同一のスタイルされますので、align-items: center https://jsfiddle.net/z1sx03by/4/ をtext-align: centerを削除し、display: flexを追加し、justify-content: center、あなたは一つの共通クラスを作成し、すべてにそれを適用する必要があります。それぞれに重複したクラスを作成する必要はありません。それを打ちなさい...これが役立つことを望む！私は自分自身を混乱を避けるためにそれらを修正する前に:)