无法将网页页脚居中并使其以窗口比例调整大小

Question

我尝试了很多代码，它们都起了作用，但当我试图为页脚并排制作两个div时，我无法将其居中，从那以后，我也无法使其与用户窗口比率一起工作，即使在尝试了其他代码后，我仍然无法修复它。

这里的问题是，我无法使页脚内部的内容居中，但仍然根据用户窗口比例进行更改。

/* Footer */
#sides{
/*margin-left:750px;*/
}
#left{
float:left;
text-align: left;
overflow:hidden;
}
.footer {
background-color: black;
padding: 30px;
text-align: center;
color: #99ffdd;
}

.footer-distributed{
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin: 0 auto;;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 14%;
}
/* Footer Center */
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p a{
color:  #e0ac1c;
text-decoration: none;;
}
@media (max-width: 880px) {
.footer-distributed .footer-left,
.footer-distributed .footer-center{
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i{
margin-left: 0;
}
}

<footer class="footer-distributed">
<div class="footer-left">
<img style="width: 100px; height: 100px" src="http://localhost/Window_Cleaner/pictures/paypal/paypal_support.png">
</div>
<div class="footer-center">
<a class="contactme" href="http://localhost/Window_Cleaner/menu/contact.html">
<h2>Contact me</h2>
</a>
<div>
<i class="fa fa-phone"></i>
<p>[phone]</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:[e-mail]">[e-mail]</a></p>
</div>
</div>
</footer>

Answer 1

您可以通过在左侧图像上使用绝对定位来实现这一点。

/* Footer */
#sides {
/*margin-left:750px;*/
}
#left {
float: left;
text-align: left;
overflow: hidden;
}
.footer {
background-color: black;
padding: 30px;
text-align: center;
color: #99ffdd;
}
.footer-left {
position: absolute;
left: 0;
}
.footer-distributed {
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
display: flex;
flex-flow: row nowrap;
justify-content: center;
position: relative;
}

<footer class="footer-distributed">
<div class="footer-left">
<img style="width: 100px; height: 100px" src="http://localhost/Window_Cleaner/pictures/paypal/paypal_support.png">
</div>
<div class="footer-center">
<a class="contactme" href="http://localhost/Window_Cleaner/menu/contact.html">
<h2>Contact me</h2>
</a>
<div>
<i class="fa fa-phone"></i>
<p>[phone]</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:[e-mail]">[e-mail]</a></p>
</div>
</div>
</footer>