div上的文本中心不使文本居中？ （推特引导 3）

Posted 2023-03-06

【中文标题】div上的文本中心不使文本居中？ （推特引导 3）

【英文标题】：Text-Center on Div not Centering the Text? (Twitter Bootstrap 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 的初学者！

【参考方案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 处于其原始位置时位于第三列下方？

我会说因为容器是“行”。另外，如果有人回答解决了您的问题，请考虑接受***.com/help/someone-answers