图片和文字对齐

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>