图像和文本对齐

Question

我有点问题。我正在尝试使用Bootstrap将我的联系人徽标与我的联系信息左侧对齐。我似乎无法将图像和联系信息对齐。联系人徽标未对齐。

我最近给了他们所有的＆＃34;图像＆＃34;并试图＆＃39; text-align＆＃39;但没有运气。

非常感谢任何帮助。  

＆＃13;

＆＃13;

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

＆＃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;

＆＃13;

＆＃13;

Answer 1

我采取了不同的方法来解决你的问题。当你写css时，试着找到最清洁，最简单的解决方案来实现你的目标。

我希望这有帮助！ ：）

＆＃13;

＆＃13;

/*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;

＆＃13;

＆＃13;