如何製作垂直對齊文本列表？

-1

我正在嘗試使用垂直對齊的文本進行列表，但無論我嘗試了多少次並進行搜索，我都無法做到。那麼，如何使用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>

來源

2016-05-15 Ahmed Al-haddad

難道您發佈'HTML'？ –

我正在做它 –

可能應該刪除文本中心類，如果你有它或CSS中的文本對齊：中心。 – gavgrif

你將需要它讓你的UL標籤集中在你的頁面的中間，李對齊CSS左

你可以嘗試對齊在右邊的項目：

ul { 
    margin-left:35%; 
} 

li { 
    text-align:left; 
}

來源

2016-05-15 17:38:50

嗯，這使它走向最右邊。 –

對不起，這是我的意思 –

然後它走到最左邊。我不知道爲什麼子彈不在中間 –

你似乎想要做的是讓他們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>

來源

2016-05-15 17:42:39 Sumurai8

如何製作垂直對齊文本列表？

回答

相關問題