如何使用 CSS 和 Bootstrap 将两段文本居中？

Question

我是编程新手，一段时间以来我一直在努力解决这个问题，但我仍然遇到问题。我正在尝试将两段不同的文本居中放置，以便它们与页面的左侧和右侧以及顶部和底部的距离相等。

这是我的代码：

<div class="entrance">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                        <li><a href="#" style="text-decoration:none"> Example1  </a></li>
                </div>
                <div class="col-md-6">
                        <li><a href="#" style="text-decoration:none" > Example2 </a></li>
                </div>  
            </div>
        </div>
    </div>

我似乎无法弄清楚我错过了什么，我确信这可能是我没有得到的非常简单的东西。感谢任何帮助，谢谢！

Answer 1

您可以使用css text-align 来达到您想要的效果。 text-aligh: right 左手 <div> 和 text-align: left 右手 <div>。

正如@Manish 提到的，我还删除了 <li> 包装器。我还在 <div> 中添加了 col-xs-6，因此它也适用于较小的视图。

示例：http://jsfiddle.net/11cLvc2c/3/

Answer 2

如果您只想让文本居中，试试这个：

在每个 "col-md-6" 旁边添加 "text-center" 类:

<div class="entrance">
    <div class="container">
        <div class="row">
            <div class="col-md-6 text-center">
                    <li><a href="#" style="text-decoration:none"> Example1  </a></li>
            </div>
            <div class="col-md-6 text-center">
                    <li><a href="#" style="text-decoration:none" > Example2 </a></li>
            </div>  
        </div>
    </div>
</div>

如果您想完全居中，我建议您从 bootstrap 稍微往外走一点，并使用 flexboxes。 Flexboxes 是 CSS3 的新功能，可以解决我们的大部分问题。请参阅此处了解更多信息：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是您修改后的代码：

   <style type="text/css">
.entrance{
    display: flex;
    justify-content:center;
    align-items: center;
    width: 800px; /*Put your desired width*/
    height: 400px; /*Put your desired height */

}

.container div
{
    width: 50%;
    text-align: center;

}
</style>




<div class="entrance">
    <div class="item-1">
        Item 1
    </div>
    <div class="item-2">
        Item 2
    </div>

如何使用 CSS 和 Bootstrap 将两段文本居中？

How to center two pieces of text using CSS and Bootstrap?

html

css

twitter-bootstrap