2017-12-30 45 views
0

私はそれが3つの行で1つの列として3つの列を見なければならない、そして私はページの中央部分でそれを達成したいと思います。私のフッターアライメント

しかし、下のcodepenのリンクに表示されている場合は、2番目のコードは最初のコードとの位置を合わせていません。

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>

+0

あなたは 'd-lg-flex flex-lg-column align-items-lg-cenフッタ要素に「ter」と表示されますか? – Jhecht

答えて

0

3はフローティングされ、最初のものは、第二の下にある第三のいずれかを押しているように、あなたは、単にフローティング問題に直面しているので、ブロックのどれが中央されていませんFloated elements of variable height push siblings down

代わりに、単にfloatを削除し、ブートストラップクラス(コンテナ/行)を正しく使用する必要があります。 r 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>

+1

ありがとうございます –

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%; 
} 
で見つけることができる "行" ブロックが欠落しています