html - 为什么我的页脚是这样显示的

Question

我的网站页脚似乎有一个小问题。 我已经根据代码在样式和 html 中出现的顺序交换了代码。

感谢任何建议

Picture of the footer

.left{
    text-align:left;
    float:left;
}
.right{
    float:right;
    text-align:right;
}
.centered{
    text-align:center;
}

<div class="footer-container">
    <footer class="wrapper">
        <div id="footer">
            <p class="left"><img src="img/map25-redish.png"/> Curaheen, Cork </p> 
            <p class="right"><img src="img/telephone65-blue.png"/> </p>
            <p class="centered"><img src="img/envelope4-green.png"/ </p>
            <br/><br/>
        </div>
    </footer>

Answer 1

我会比亚历克西斯的答案更进一步，使用 flexbox 的更现代的方法:

#footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* adjust margin and padding beow to suit your design */
  margin: 0;
  padding: 0;
}

#footer li {
  display: flex;
  align-items: center;
}

#footer li img {
  margin-right: 5px;
}

<ul id="footer">
    <li><img src="http://fakeimg.pl/40"/>Curaheen, Cork </li>
    <li><img src="http://fakeimg.pl/40"/>Email address</li>
    <li><img src="http://fakeimg.pl/40"/>Phone number</li>
</ul>

这样，#footer 中的子元素将占用它们所需的空间，与它们在 HTML 中的顺序相同，在它们之间留出空间(justify-content 属性)和垂直居中(align-items 属性)。

我们对 LI 子级采用相同的程序来对齐图像与文本(align-items 属性)

当然，您必须调整边距和填充以适合您的设计。