我有点问题。我正在尝试使用Bootstrap将我的联系人徽标与我的联系信息左侧对齐。我似乎无法将图像和联系信息对齐。联系人徽标未对齐。
我最近给了他们所有的"图像"并试图' text-align'但没有运气。
非常感谢任何帮助。
.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 {
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>
&#13;
答案 0 :(得分:0)
我采取了不同的方法来解决你的问题。当你写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;
}
&#13;
<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>
&#13;