Question

我有3张图片，旁边带有文字（社交媒体）。我希望文本具有不同的padding或margin，使其位于图像的中心。但是，当我使用其中之一时，图像也会越来越高。我认为这是因为他们都有display: inline-block;。

这是html代码；

    <footer>
        <div id="socialIcon"><img src="images/media/telefoon.png" width="30"></div>
        <div id="socialText">06-123456</div>
        <div id="socialIcon"><img src="images/media/mail.png" width="30"></div>
        <div id="socialText">example@gmail.com</div>
        <div id="socialIcon"><a class="socialIcon" href="https://www.instagram.com/example/"><img src="images/media/instagram.png" width="30px"</a></div>
        <div id="socialText"><a class="socialText" href="https://www.instagram.com/example/">@example</a></div>
    </footer>

这是CSS代码：

footer {
    background: #222222;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: white;
    font-family: proxima-nova, sans-serif;
    text-align: center;
    font-size: 20px;
}
#socialText{
    display: inline-block;
    margin-bottom: 10px;

}
#socialIcon{
    display: inline-block;
    margin-left: 10px;
    margin-right: 3px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    height: 30px;
}

但是现在，不仅socialText上升了10px，socialIcon也上升了。

Answer 1

您的问题之一将是由<img src="images/media/instagram.png" width="30px"行中缺少的右括号引起的，该括号导致下一个开始标记被解释为先前（未关闭）HTML标记的一部分。随后所有随后的开始和结束标签将被错误地解释，例如结束</div>与<a>之前的开始<img>标签不符。

除了应该设置：

img {
  vertical-align: middle;
}

使其他容器与图像在垂直中间对齐。

如BugsArePeopleToo所述，请不要使用重复的ID，而应使用CSS类。这是更改后的代码段：

footer {
  background: #666;
  position: fixed;
  bottom: 0;
  width: 100%;
  color: white;
  font-family: proxima-nova, sans-serif;
  text-align: center;
  font-size: 20px;
  padding: 5px;
}

.socialText {
  display: inline-block;
}

.socialIcon {
  display: inline-block;
  margin-left: 10px;
  margin-right: 3px;
  margin-bottom: 0px;
  margin-top: 0px;
  padding-bottom: 0px;
  height: 30px;
}

footer img {
  vertical-align: middle;
}

<footer>
  <div class="socialIcon"><img src="https://pngimage.net/wp-content/uploads/2018/06/telefoon-png.png" height="30"></div>
  <div class="socialText">06-123456</div>
  <div class="socialIcon"><img src="https://pngimage.net/wp-content/uploads/2019/05/white-mail-png-1.png" height="30"></div>
  <div class="socialText">Example@GMail.com</div>
  <div class="socialIcon"><a class="socialIcon" href="https://www.instagram.com/example/">
  <img src="https://pngimage.net/wp-content/uploads/2019/05/white-transparent-instagram-png-1.png" height="30"/></a></div>
  <div class="socialText"><a class="socialText" href="https://www.instagram.com/example/">@example</a></div>
</footer>

Answer 2

Flexbox是这种布局的最佳朋友。只需提供页脚包装器display:flex和其他两个附加规则，即可将页脚中的项目垂直和水平居中：

footer {
  display: flex;
  align-items: center; // centers items vertically
  justify-content: center; // centers items horizontally
}

现在，您可以删除用于使项目上下颠簸的所有填充和边距规则。注意，我还向页脚添加了padding，以在边缘周围提供一致的空间。

最后的建议是，对多个项目使用具有相同值的id属性是无效的。您想重用CSS的那一刻，就可以获取类。干杯！

footer {
  display: flex;
  align-items: center;
  justify-content: center;
    background: #222222;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    color: white;
    font-family: proxima-nova, sans-serif;
    font-size: 20px;
}
.socialIcon {
    margin: 0 10px;
    height: 30px;
    width: auto;
}

<footer>
  <div class="socialIcon"><img src="https://picsum.photos/30" width="30"></div>
  <div class="socialText">06-123456</div>
  <div class="socialIcon"><img src="https://picsum.photos/31" width="30"></div>
  <div class="socialText">example@gmail.com</div>
  <div class="socialIcon"><a class="socialIcon" href="https://www.instagram.com/example/"><img src="https://picsum.photos/32" width="30px" /></a></div>
  <div class="socialText"><a class="socialText" href="https://www.instagram.com/example/">@example</a></div>
</footer>

如何在同一行中给不同的div不同的高度

2 个答案: