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>

html代碼

 

css代碼以下：

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #container {
 6     text-align: center;
 7     background-color: #DBEDFD;   //這三句只是爲了美觀，請忽略。。。
 8     height: 40px;
 9     padding: 15px 0;
10 }
11 #child-container {
12     text-align: left;
13     display: inline-block;
14 }

CSS代碼