首頁 >web前端 >css教學 >css水平居中怎麼設定？兩種css水平居中的設定方法

css水平居中怎麼設定？兩種css水平居中的設定方法

不言原創: 2018-09-10 13:59:557394瀏覽

css樣式能夠實現水平居中，那麼css水平居中怎麼設定呢？ 本篇文章將給大家分享關於css設定水平居中的實作方法。

css中可以設定行內元素的水平居中和設定區塊級元素的水平居中，對於行內元素和區塊級元素不了解的同學可以參考一下css區塊級元素的定義是什麼？ css塊級元素有哪些？和css行內元素有哪些？ css區塊級元素和行內元素的差別這兩篇文章，那我們下面就直接來看css這兩種水平居中的設定方法。

首先我們來看看css設定行內元素水平居中。

第一種：css行內元素水平居中：

語法：div{text-align:center} /*DIV內的行內元素都會水平居中* /

簡單解釋：為父元素設定中text-align:center樣式。

<div style="text-align: center">
    <span>行内元素水平居中</span>
</div>

詳細解釋：

1、2e1cf0710519d5598b1f0f14c36ba674文字2e1cf0710519d5598b1f0f14c36ba674在這裡讓「文字」這兩個字相對於label水平居中是毫無意義的，label是行內元素，他的寬度等於內容的寬度，也就是說「文字」這兩個字，永遠是水平居中的。

2、e388a4556c0f65e1904146cc1a846bee文字e388a4556c0f65e1904146cc1a846bee此時，讓「文字」這兩個字水平居中便有了意義，因為p是塊級元素，他的寬度獨佔一行，而文字只佔兩個字元寬度，此時為p元素設定text-align:center;那麼「文字」這兩個字便在一行內水平居中了。

3、dc6dce4a544fdca2df29d5ac0ea9906b2e1cf0710519d5598b1f0f14c36ba674文字2e1cf0710519d5598b1f0f14c36ba674dc6dce4a544fdca2df29d5ac0ea9906b,此時該如何讓label元素相對於div水平居中。

看完了css行內元素水平居中，我們接下來說一說css塊級元素的水平居中，css塊級元素水平居中又分為定寬塊級元素水平居中和不定寬塊級元素水平居中，下面我們分別來看看。

第二種：css定寬區塊級元素水平居中：既是區塊級元素又是固定寬度的元素。

給需要水平居中的區塊級元素本身左右margin值設定為auto;

例如：

<div>
    <div style="width: 100px;height: 100px;background-color: green;margin: 0 auto">
    </div></div>

css不定寬區塊級元素水平居中：寬度不固定的區塊級元素

例如：

1、將區塊級元素加入f5d188ed2c074f8b944552db028f98a1標籤。

<table style="margin: 0 auto">
    <tbody>
        <tr><td>
                <div>设置table实现水平居中</div>
    </td></tr>
    </tbody></table>

2、設定區塊級元素樣式display:inline，然後再為父元素加入text-align:center樣式。

<div style="text-align: center">
    <div style="display: inline">
        设置inline实现水平居中    
 </div></div>

3、在區塊級元素外加上一層父元素，並設定父元素樣式為style="float:left;position:relative;left:50%";設定區塊級元素樣式為style="float:left;position:relative;left:-50%"

<div style="float:left;position:relative;left: 50%">
    <div style="position: relative;left: -50%">
        设置relative实现水平居中
    </div>
</div>

css水平居中怎麼設定？兩種css水平居中的設定方法

相關文章