我的页脚对齐

问题描述 投票：0回答：2

当它到达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">[email protected]</span>
  </Section>
  <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>
html css bootstrap-4
2个回答
0
投票

没有一个块是居中的，因为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">[email protected]</span>
      </Section>
    </div>
  </div>
  <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>
0
投票

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">[email protected]</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%;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.