我的页脚对齐

时间：2017-12-30 07:29:35

标签： html css bootstrap-4

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

但是如果你在下面的codepen链接中看到第二个没有与第一个没有对齐。

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

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

没有任何一个区域居中，因为3是浮动的，你只是面临浮动问题，因为第一个是推动第三个位于第二个之下，就像你可以阅读这个问题：Floated elements of variable height push siblings down < / p>

相反，你需要简单地删除float并正确使用引导类（容器/行），你的div将正常运行。然后，您可以在到达lg：

的断点时添加text-align:center

＆＃13;
＆＃13; 
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;
}

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

1）避免在bootstrap之上使用自定义布局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%;
}
相关问题
最新问题