html&css中的文字對齊問題

html&css的使用過程中，我們經常會遇到很多文字對齊問題。下面我要介紹一個有丁點難的文字對齊問題。

實現效果如下圖所示。

 

兩行長度不定的文字，要讓它們總體水平居中，然后，這兩行字要左對齊，如下圖所示。

聽起來好像挺簡單，然而實現起來卻。。。。。。

 

錯誤做法一：

用一個大塊div包住兩個div，在大div中設置"text-align:center; "，在小div中設置"text-align:left; "

結果如下圖所示。

因為div會占據一整行，而不能隨內容大小自動調節寬度，如果要對大div設置width，這也不好控制，因為萬一文段長度改變，那么還是無法實現居中。

 

錯誤做法二：

於是我把小div改成span，因為span是行內元素，能隨span內的文段寬度來調節自身寬度。結果如下圖所示。

因為span自動調節自身寬度（即span寬度等於文段長度），所以"text-align:left; "對它不起作用。

 

正確做法：

既然塊級元素和行內元素都無法實現該效果，那能否折中采取介於它們之間的元素。

對，就是設置"display:inline-block;"。

效果圖如下：

思路：在一個大div中放置一個小div，小div中包含2個span文段。大div設置"text-align:center; "，讓小div居中; 小div設置"display:inline-block;"，這樣小div就能有行內元素的特性，會根據內容自動調節自己的寬度，再設置"text-align:left; "，讓其中的元素左對齊，這樣就搞定了。

Tip：小div中的span元素可替換為div等塊級元素，小div可替換為span等行內元素。

 

html代碼如下：

<div id="container">
    <div id="child-container">
        <span class="text">請盡快付款以保證商家能及時提供服務</span><br/>
        <span class="text">未支付訂單將在半個小時后關閉</span>
    </div>
</div>

 

css代碼如下：

*{
    margin: 0;
    padding: 0;
}
#container {
    text-align: center;
    background-color: #DBEDFD;   //這三句只是為了美觀，請忽略。。。
    height: 40px;
    padding: 15px 0;
}
#child-container {
    text-align: left;
    display: inline-block;
}