我的页脚对齐

Question

当页脚到达 lg 断点时，我试图使页脚居中，三列应该被视为 3 行中的一列，我想在页面的中心部分实现它。

但是，如果您在下面的 codepen 链接中看到第二个未与第一个对齐底部。

https://codepen.io/Sunny143/pen/VybbGX?editors=1100

footer {
  margin-left: 0;
  margin-right: 0;
  background-color: #305C7A;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: auto;
}

footer h3 {
  color: white;
  text-decoration: underline;
  text-decoration-color: white;
}

footer p {
  color: white;
  width: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
}

footer span {
  color: white;
}

.address {
  float: left;
  padding: 35px;
  padding-bottom: 50px;
  width: 30%;
  margin-left: 4%;
  margin-right: 4%;
}

.Main-address {
  float: left;
  width: 30%;
  padding: 35px;
  text-align: left;
  margin-left: 4%;
  margin-right: 4%;
}

.contact-info {
  float: left;
  position: relative;
  padding-bottom: 50px;
  padding: 35px;
  width: 30%;
  text-align: left;
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 35px;
}

.copyright {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 35px;
  background-color: #111B22;
  align-items: center;
  margin-bottom: 0%;
}

<footer>
  <!-- starting of a footer-->
  <section class="address col-lg-3 col-md-12 col-sm-12">
    <h3>Branch Office</h3>
    <span class="Name">SambaSiva Rao Muvva</span><br>
    <span class="qual">B.com., A.C.A</span>
    <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
  </section>
  <section class="Main-address col-lg-3 col-md-12 col-sm-12">
    <h3>Head Office</h3>
    <span class="Name">Konduru Anil Kumar</span><br>
    <span class="qual">B.com., A.C.A</span>
    <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
  </section>
  <Section class="contact-info col-lg-3 col-md-12 col-sm-12">
    <h3>Contact Information</h3>
    <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
    <span class="Email-ID">Email :</span><span class="email">casmaba.assosciates@gmail.com</span>
  </Section>
  <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>

Answer 1

没有一个块居中，因为 3 个是浮动的，而您只是面临浮动问题，因为第一个将第三个推到第二个下方，就像您在这个问题中看到的那样：Floated elements of variable height push siblings down

相反，您只需删除浮动并正确使用引导类（容器/行），您的 div 就会正常运行。然后你可以在到达 lg 的断点时添加text-align:center：

footer {
  margin-left: 0;
  margin-right: 0;
  background-color: #305C7A;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: auto;
}

footer h3 {
  color: white;
  text-decoration: underline;
  text-decoration-color: white;
}

footer p {
  color: white;
  width: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
}

footer span {
  color: white;
}

.address,.contact-info,.Main-address  {
  padding: 35px;
}

.copyright {
  width: 100%;
  height: 35px;
  background-color: #111B22;
  align-items: center;
  margin-bottom:0;
}

@media all and (max-width:991px) {
.address,.contact-info,.Main-address  {
  text-align:center;
}

}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<footer>
  <div class="container">
    <div class="row justify-content-around">
      <!-- starting of a footer-->
      <section class="address col-lg-3 col-md-12 col-sm-12">
        <h3>Branch Office</h3>
        <span class="Name">SambaSiva Rao Muvva</span><br>
        <span class="qual">B.com., A.C.A</span>
        <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
      </section>
      <section class="Main-address col-lg-3 col-md-12 col-sm-12">
        <h3>Head Office</h3>
        <span class="Name">Konduru Anil Kumar</span><br>
        <span class="qual">B.com., A.C.A</span>
        <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
      </section>
      <Section class="contact-info col-lg-3 col-md-12 col-sm-12">
        <h3>Contact Information</h3>
        <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
        <span class="Email-ID">Email :</span><span class="email">casmaba.assosciates@gmail.com</span>
      </Section>
    </div>
  </div>
  <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>

Answer 2

1) 避免在引导程序之上使用自定义布局 CSS，这将破坏使用响应库的目的。

例子：

position:absolute;
float:left; 
width:30%;

2) 遵循引导页面上提供的指南以正确实施组件。在这种情况下，您缺少一个“行”块
link -> Grid system Bootstrap

上述问题的解决方案可以在以下链接中找到 https://codepen.io/YasirKamdar/pen/ypbXVg

HTML

<footer>  
  <!-- starting of a footer-->
  <div class="row">
      <section class="address col-lg-4 col-md-12 col-sm-12">
        <h3>Branch Office</h3>
       <span class="Name">SambaSiva Rao Muvva</span><br>
       <span class="qual">B.com., A.C.A</span>
       <p>23-5-93, Besides Bank of India<br>
     Naidupet 1st lane<br>
  Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-4 col-md-12 col-sm-12">
  <h3>Head Office</h3>
  <span class="Name">Konduru Anil Kumar</span><br>
  <span class="qual">B.com., A.C.A</span>
  <p>No 4, 2nd floor<br>
  Rangarajulu Street, Ayyavoo colony<br>
  Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-4 col-md-12 col-sm-12">
  <h3>Contact Information</h3>
  <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
  <span class="Email-ID">Email :</span><span class="email">casmaba.assosciates@gmail.com</span>
</Section>
  </div>
<p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>        

CSS

footer{
  margin-left:0;
  margin-right:0;
  background-color:#305C7A;
  bottom:0px;
  width:100%;
  height:auto;
}
  footer h3{
    color:white;
    text-decoration:underline;
    text-decoration-color:white;
}
.address, .Main-address, .contact-info  {
  padding-left: 35px;  
}
  footer p{
    color:white;
    width:100%;
    align-content:center;
    align-items: center;
    justify-content: center;  
}
  footer span{
    color:white;
}
.copyright{
    bottom:0px;
    width:100%;
    height:35px;
    background-color:#111B22; 
    align-items:center;
    margin-bottom: 0%;
}