CSS水平居中的方法實(shí)例分析

本篇內(nèi)容主要講解“CSS水平居中的方法實(shí)例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS水平居中的方法實(shí)例分析”吧!

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)昔陽免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

（1）文本，圖片等行內(nèi)元素的水平居中

給父元素設(shè)置text-align:center可以實(shí)現(xiàn)文本，圖片等行內(nèi)元素的水平居中，代碼如下：

<style>
.wrap{text-align:center;background:#ccc;margin-bottom:10px;color:red;}
</style>
<div class="wrap">Hello word</div>
<div class="wrap"><img src="logo.png" height="129" width="238" alt="" /></div>

效果如下：

（2）確定寬度的塊級(jí)元素的水平居中

確定寬度的塊級(jí)元素的水平居中是通過設(shè)置margin-left：auto；margin-right:auto;來實(shí)現(xiàn)的，代碼如下

<style>
.wrap{width:500px;height:100px;background:#ccc;}
.test{width:200px;height:50px;background:red;margin:0 auto;}
</style>
<div class="wrap"><div class="test"></div></div>

效果如下 ：

（3）不確定寬度的塊級(jí)元素的水平居中

不確定寬度的塊級(jí)元素的水平居中有三種實(shí)現(xiàn)方式，下面以分頁為例子，因?yàn)榉猪摰臄?shù)量是不確定的 ，所以我們不能通過設(shè)置寬度來限制他的彈性。

方法一：

<style>
.wrap{background:red;}
ul,li{list-style:none;margin:0;padding:0;}
table{margin-left:auto;margin-right:auto;background:#ccc;}
.test li{float:left;display:inline;margin-right:5px;}
</style>
<div class="wrap">
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                        <li>2</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <th>
                    <ul class="test">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </th>
            </tr>
        </tbody>
    </table>
</div>

效果如下：

方法一演示了分別有一個(gè)，兩個(gè)，三個(gè)分頁的情況下，分頁模塊都能居中的示例。ul標(biāo)簽是整個(gè)分頁模塊的根元素，它包含的li的數(shù)量不確定，所以u(píng)l本身的寬度也無法確定，所以不能通過固定寬度設(shè)置margin-left和margin-right:auto設(shè)置居中，這里用到了一個(gè)table來幫助實(shí)現(xiàn)不確定寬度的塊級(jí)元素的水平居中，table有趣的地方是它本身不是塊級(jí)元素，如果不給它設(shè)置寬度的話，它本身的寬度是通過內(nèi)部元素&ldquo;撐起&rdquo;，即使不給它設(shè)置寬度，僅設(shè)置margin-left:auto, margin-right:auto 來實(shí)現(xiàn)居中，間接使ul居中了

方法二：

<style>
ul,li{list-style:none;margin:0;padding:0;}
.wrap{width:500px;height:100px;background:#ccc;}
.test{text-align:center;padding:5px;}
.test li{display:inline;padding-right:10px;}
</style>
<div class="wrap">
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

效果如下：

此方法的思路是改變塊級(jí)元素為line類型，然后通過text-align:center來實(shí)現(xiàn)居中，比方法一簡單，它的好處是不用添加無語義標(biāo)簽，簡化了標(biāo)簽的嵌套深度，但也存在一定的問題：將塊級(jí)元素轉(zhuǎn)化為inline元素，行內(nèi)元素比塊級(jí)元素少一些功能，如設(shè)置長寬值，在某些特殊需要的css設(shè)置中，可能會(huì)帶來一些限制。

方法三：

<style>
ul{list-style:none;margin:0;padding:0;}
.wrap{background:#ccc;width:500px;height:100px;}
.test{clear: both;float:left;padding-top:5px;position:relative;left:50%;}
.test li{position:relative;left:-50%;margin-right:5px;float:left;display:inline;}
</style>
<div class="wrap">
    <ul class="test">
        <li>1</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
    </ul>
    <ul class="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

效果如下：

方法三的是給父元素設(shè)置float，然后父元素設(shè)置position:relative和left:50%;  子元素設(shè)置position:relative和left:-50%來實(shí)現(xiàn)水平居中，這種方法可以保留塊級(jí)元素仍以display:block的形式顯示，不會(huì)增加無語義標(biāo)簽。

到此，相信大家對(duì)“CSS水平居中的方法實(shí)例分析”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁名稱：CSS水平居中的方法實(shí)例分析
當(dāng)前URL：http://muchs.cn/article46/gesjeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站排名、ChatGPT、電子商務(wù)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)