html - 如何使用 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> wrapper 。我还添加了 col-xs-6到 <div>所以它也适用于较小的 View 。

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