画像とテキストの位置合わせ

Question

私は少し問題があります。私はBootstrapを使用して私のコンタクトロゴを私のコンタクト情報の左に揃えようとしています。私はイメージと連絡先の情報を一列に並べているようです。連絡先のロゴは一列に並んでいません。

私は最近、それらにすべて「イメージ」のクラスを与え、「テキスト整列」しようとしましたが運はありませんでした。

ご協力いただきありがとうございます。

.jumbotron .container-contact { 
 
    background: rgba(236,233,233,0.4); 
 
    padding: 2rem; 
 
    color: white; 
 
    box-shadow: 5px 5px 5px black; 
 
} 
 

 
.contact-info { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 0.9em; 
 
} 
 

 
.contact-info a { 
 
    display: inline; 
 
    min-height: 20px; 
 
    background-repeat: no-repeat; 
 
    background-size: 22px 22px; 
 
    padding: 0 0 0 30px; 
 
    margin: 0 0 10px; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    color: #fff; 
 
    text-shadow: 0 0 0 #000; 
 
} 
 

 
.phone, 
 
.mail, 
 
.twitter, 
 
.linkedin { 
 
\t margin-left: 50px; 
 
    margin-right: 25px; 
 
    margin-bottom: 1rem; 
 
} 
 

 
.images { 
 
    padding-right: 2rem; 
 
}

<div class="jumbotron jumbotron" id="contact"> 
 
       <div class="container container-contact"> 
 
       <h2 class="contact text-danger mb-4">contact</h2> 
 
       <ul class="contact-info"> 
 
        <li class="phone"><a href="tel:555-555-5555"><img src="img/phone-call.png" class="images">555-555-5555</a></li> 
 
        <li class="mail"><a href="xxxx.com" target="_blank"><img src="img/envelope.png" class="images">ec.com</a></li> 
 
        <li class="twitter"><a href="" target="_blank"><img src="img/twitter.png" class="images">@ec77</a></li> 
 
        <li class="linkedin"><a href="" target="_blank"><img src="img/linkedin.png" class="images">Name</a></li> 
 
       </ul> 
 
       </div> 
 
      </div>

Answer 1

私はあなたの問題を解決するための別のアプローチをとっています。あなたがあなたの目標を達成するための最もクリーンでシンプルな解決策を見つけることを試みるCSSを書くとき。

こちらがお役に立てば幸いです。 :)

/*Default styles*/ 
 

 
* { 
 
    margin: 0px; 
 
} 
 

 
/*Navigation styles*/ 
 

 
#contact { 
 
    padding: 20px; 
 
    background-color: rgba(236, 233, 233, 0.4); 
 
    box-shadow: 5px 5px 5px #000; 
 
    color: #fff; 
 
} 
 

 
h2 { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 

 
#contact ul { 
 
    display: inline-block; 
 
    padding: 0px; 
 
} 
 

 
#contact ul li { 
 
    display: inline-block; 
 
}

<div class="jumbotron jumbotron" id="contact"> 
 
       <div class="container container-contact"> 
 
       <h2 class="contact text-danger mb-4">contact</h2> 
 
       <ul class="contact-info"> 
 
        <li class="phone"><a href="tel:555-555-5555"><img src="img/phone-call.png" class="images">555-555-5555</a></li> 
 
        <li class="mail"><a href="xxxx.com" target="_blank"><img src="img/envelope.png" class="images">ec.com</a></li> 
 
        <li class="twitter"><a href="" target="_blank"><img src="img/twitter.png" class="images">@ec77</a></li> 
 
        <li class="linkedin"><a href="" target="_blank"><img src="img/linkedin.png" class="images">Name</a></li> 
 
       </ul> 
 
       </div> 
 
      </div>