如何制作垂直对齐文本列表？

问题描述：

我正在尝试使用垂直对齐的文本进行列表，但无论我尝试了多少次并进行搜索，我都无法做到。那么，如何使用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>

难道您发布'HTML'？ –

我正在做它 –

可能应该删除文本中心类，如果你有它或CSS中的文本对齐：中心。 – gavgrif

答

你将需要它让你的UL标签集中在你的页面的中间，李对齐CSS左

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

ul { 
    margin-left:35%; 
} 

li { 
    text-align:left; 
}

嗯，这使它走向最右边。 –

对不起，这是我的意思 –

然后它走到最左边。我不知道为什么子弹不在中间 –

答

你似乎想要做的是让他们le英尺对齐，并在该屏幕的中间有该元素。

这样做的简单方法是拥有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>

如何制作垂直对齐文本列表？

相关推荐