Question

我正在尝试使用垂直对齐的文本进行列表，但无论我尝试和搜索多少，我都无法做到。那么，如何使用twitter bootstrap实现以下结果？！

                                   Ahmed: what's your name?
                                   Bob: ahmed
                                   Cate: ok!

目前我有这个，我似乎无法修复。

                              Ahmed: what's your name?
                                   Bob: ahmed
                                    Cate: ok!

HTML：

<div class="container-fluid" align="center">
    <div class="jumbotron">
        <ul style="list-style-type: none; vertical-align: middle;">

            <li><h5><strong>Ahmed and his friends</h5></li>
            <li><h5><strong>life is good</h5></li>

        </ul>

    </div>
</div>

Answer 1

您需要的是让您的ul标签位于页面中间并且li左对齐

在css中你可以尝试对齐右边的项目：

ul {
  margin-left:35%;
}

li {
    text-align:left;
}

Answer 2

您似乎想要做的是让他们左对齐，并将该元素放在屏幕的中间中。

这样做的简单方法是使用2个元素。第二个元素呈现为inline-block而不是block，因此它不会贪婪，也不会占用所有水平空间。

#outer {
  border: 1px solid black;
  text-align: center;
}

#inner {
  border: 1px dotted blue;
  text-align: left;
  display: inline-block;
}

<div id="outer">
  <div id="inner">
    Ahmed: what's your name?
    <br/>Bob: ahmed
    <br/>Cate: ok!
  </div>
</div>

如何制作包含垂直对齐文字的列表？

2 个答案: