【问题标题】:Text-Center on Div not Centering the Text? (Twitter Bootstrap 3)div上的文本中心不使文本居中? (推特引导 3)
【发布时间】:2022-01-10 19:42:12
【问题描述】:

我目前正在学习关于 Coursera 的 John's Hopkins HTML/CSS 和 Javascript 课程,使用 Bootstrap 3.6 对 David Chu 的中国小酒馆进行编码(我知道已经过时了)。我遇到了一个问题,版权行最终位于第三列 (my site screensho) 的下方,而不是位于页脚底部的中心 (official site screenshot)。这是该页脚部分的代码:

<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 的初学者!

【问题讨论】:

    标签: html css twitter-bootstrap-3


    【解决方案1】:

    解决办法就是把它移到外面一层,我想它会解决的。

    <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

    【讨论】:

    • 感谢您的回复!我知道我可以通过将其上移一级来解决问题,我只是想了解为什么它不在页面中居中,而是在 div 处于其原始位置时位于第三列下方?
    • 我会说因为容器是“行”。另外,如果有人回答解决了您的问题,请考虑接受stackoverflow.com/help/someone-answers
    猜你喜欢
    • 2019-04-17
    • 2019-09-07
    • 2017-11-26
    • 2018-02-04
    • 1970-01-01
    • 2020-05-23
    • 2014-10-09
    • 1970-01-01
    • 2018-05-19
    相关资源
    最近更新 更多