簡體   English   中英

div上的文本中心不使文本居中? (推特引導 3)

[英]Text-Center on Div not Centering the Text? (Twitter Bootstrap 3)

我目前正在使用 Bootstrap 3.6(過時的,我知道)Coursera 上的 John's Hopkins HTML/CSS 和 Javascript 課程對 David Chu's China Bistro 進行編碼。 我遇到了一個問題,版權行最終位於第三列(我的網站截圖)下方,而不是在頁腳底部居中(官方網站截圖)。 這是該頁腳部分的代碼:

<footer class="panel-footer">
    <div class="container">
        <div class="row">
            <section id="hours" class="col-sm-4">
                <span>Hours:</span><br>
                Sun-Thurs: 11:15am-10:00pm<br>
                Fri: 11:15am - 2:30pm<br>
                Saturday collapsed<hr class="visible-xs">
            </section>
            <section id="address" class="col-sm-4">
                <span>Address:</span><br>
                7105 Resterstown Road<br>
                Baltimore, MD 21215
                <p>* Delivery area within 3-4 miles, with minimum order of 
                    $20 plus $3 charge for all deliveries.</p>
                <hr class="visible-xs">
            </section>
            <section id="testimonials" class="col-sm-4">
                <p>"The best Chinese restaurant I've been to! And that's saying
                    a lot, since I've been to many!"</p>
                <p>"Amazing food! Great service! Couldn't ask for more! I'll be
                    back again and again!"</p>
            </section>
            <div class="text-center">&copy; Copyright David Chu's China Bistro 2016</div>
        </div>
        
    </div>
</footer>

現在我明白它沒有居中,因為帶有版權符號的div不應該在帶有class="row"div內,但無論如何我不明白為什么 div 位於第三列下方。 Bootstrap 中的所有部分都應該是浮動的,這意味着它們已脫離正常的文檔流。 但是,版權聲明不是浮動的,所以不應該占據整個寬度並在頁面中間居中嗎? 抱歉,我是 HTML/CSS 的初學者!

解決辦法就是把它移到外面一層,我想它會解決的。

<footer class="panel-footer">
    <div class="container">
        <div class="row">
            <section id="hours" class="col-sm-4">
                <span>Hours:</span><br>
                Sun-Thurs: 11:15am-10:00pm<br>
                Fri: 11:15am - 2:30pm<br>
                Saturday collapsed<hr class="visible-xs">
            </section>
            <section id="address" class="col-sm-4">
                <span>Address:</span><br>
                7105 Resterstown Road<br>
                Baltimore, MD 21215
                <p>* Delivery area within 3-4 miles, with minimum order of 
                    $20 plus $3 charge for all deliveries.</p>
                <hr class="visible-xs">
            </section>
            <section id="testimonials" class="col-sm-4">
                <p>"The best Chinese restaurant I've been to! And that's saying
                    a lot, since I've been to many!"</p>
                <p>"Amazing food! Great service! Couldn't ask for more! I'll be
                    back again and again!"</p>
            </section>
            
        </div>
        <div class="text-center">&copy; Copyright David Chu's China Bistro 2016</div>
    </div>
</footer>


如果問題仍然存在,請嘗試使用p標簽而不是div來獲取版權

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM