明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線(xiàn)學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

html中居中設(shè)置方法說(shuō)明（代碼）

發(fā)表時(shí)間：2023-09-03 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于html中居中設(shè)置方法介紹（代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。水平居中實(shí)際開(kāi)發(fā)過(guò)程中我們會(huì)遇到很多需要元素水平居中的情況，例如文章標(biāo)題等。這里常見(jiàn)的水平居中情況有行內(nèi)元素和塊級(jí)元素兩種，塊級(jí)元素又分為定寬塊級(jí)元素和不定寬塊級(jí)元素兩種...

本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于html中居中設(shè)置方法介紹（代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

水平居中

實(shí)際開(kāi)發(fā)過(guò)程中我們會(huì)遇到很多需要元素水平居中的情況，例如文章標(biāo)題等。這里常見(jiàn)的水平居中情況有行內(nèi)元素和塊級(jí)元素兩種，塊級(jí)元素又分為定寬塊級(jí)元素和不定寬塊級(jí)元素兩種情況。定寬塊級(jí)元素顧名思義就是塊級(jí)元素的width是個(gè)固定的值；那么不定寬塊級(jí)元素我們就知道是塊級(jí)元素的width不是個(gè)定值的情況。

行內(nèi)元素

當(dāng)被設(shè)置的元素是文本、圖片等行內(nèi)元素的時(shí)候，我們是通過(guò)給父元素設(shè)置 text-align:center 來(lái)實(shí)現(xiàn)的。

<body>
    <div class="textCenter">這是一個(gè)在父元素中居中元素</div>
</body>
<style>
    textCenter{
    text-align:center;
    }
</style>

由上述代碼可知"這是一個(gè)在父元素中的居中元素"這段文字的父元素的CSS樣式增加了 text-align:center；屬性，所以文本展示居中。但是當(dāng)被設(shè)置元素為塊級(jí)元素時(shí)候這種方式就不太適用了，塊級(jí)元素的情況又分為定寬塊級(jí)元素和不定寬塊級(jí)元素兩種。

定寬塊級(jí)元素

滿(mǎn)足定寬塊級(jí)元素"定寬"和"塊級(jí)元素"兩個(gè)條件是可以通過(guò)設(shè)置左右margin的值為auto來(lái)實(shí)現(xiàn)居中。

<body>
    <div>水平居中的定寬塊級(jí)元素</div>
</body>
<style>
    div{
        border:1px solid blue;
        width:100px;    /*寬度設(shè)置固定值*/
        margin:10px auto;
    }
</style>
/*或者也可以寫(xiě)成 margin-left:auto;
               margin-right:auto;*/
/* 元素的上下margin屬性可以照常設(shè)置，不受影響 */

不定寬塊級(jí)元素

不定寬塊級(jí)元素的居中方法有三種：第一種是加入table標(biāo)簽；第二種是設(shè)置display:inline方法，與第一種類(lèi)似，顯示類(lèi)型設(shè)為行內(nèi)元素，進(jìn)行不定寬元素的屬性設(shè)置；第三種方法是設(shè)置position:relative和left:50%，利用相對(duì)定位的方式，將元素向左偏移50%用以實(shí)現(xiàn)居中的目的。

加入table標(biāo)簽

加入table標(biāo)簽是利用table標(biāo)簽的長(zhǎng)度自適應(yīng)性（不定義其長(zhǎng)度也不默認(rèn)父元素body的長(zhǎng)度，table長(zhǎng)度是根據(jù)內(nèi)文本長(zhǎng)度決定的），因此可以看作一個(gè)定寬塊級(jí)元素，然后再利用定寬塊級(jí)元素居中的margin方式使其水平居中。

使用的方式第一步為需要設(shè)置居中的元素外面加一個(gè)table標(biāo)簽，然后為這個(gè)table設(shè)置"左右margin居中"

<div>
    <table>
        <tbody>
            <tr><td>
            <ul>
                <li>鋤禾日當(dāng)午</li>
                <li>汗滴禾下土</li>
                <li>誰(shuí)知盤(pán)中餐</li>
                <li>粒粒皆辛苦</li>
            </ul>
            </td></tr>
        </tbody>
    </table>
</div>
<style>
    table{
    border:1px solid;
    margin:0 auto;
    }
</style>

設(shè)置display:inline方法

改變塊級(jí)元素的display為inline類(lèi)型，設(shè)置為行內(nèi)元素顯示，然后使用 text-align:center來(lái)實(shí)現(xiàn)居中顯示。這種方法相較于設(shè)置table方式的優(yōu)勢(shì)是不用增加無(wú)語(yǔ)義標(biāo)簽，但是這種方式也存在一定的問(wèn)題，就是它將塊狀元素的display改為inline，元素變?yōu)樾袃?nèi)元素后會(huì)少了一些功能使用。

<body>
    <div class="container">
        <ul>
            <li><a href="#">First</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
        </ul>
    </div>
</body>
 
<style>
.container{
    text_align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
 
.container li{
margin-right:10px;
display:inline;
}
</style>

設(shè)置position:relative和left:50%

通過(guò)給父元素設(shè)置float，然后設(shè)置position:relative和left:50%，子元素設(shè)置position:relative和left:50%來(lái)實(shí)現(xiàn)水平居中。

<body>
<div class="container">
    <ul>
        <li><a href=""#>First</a></li>
        <li><a href=""#>Second</a></li>
        <li><a href=""#>Third</a></li>
        <li><a href=""#>Fourth</a></li>
    </ul>
</div>
</body>
 
<style>
.container{
    float:left;
    position:relative;
    left:50%;
}
 
.container ul{
    list-style:none;
    margin:0;
    padding:0;
 
    position:relative;
    left:-50%
}
 
.container li{
    float:left;
    display:inline;
    margin-right:8px
}
</style>

垂直居中

垂直居中分為兩種情況分別是父元素高度確定的單行文本和父元素高度確定的多行文本。

父元素高度確定的單行文本

父元素高度確定的單行文本豎直居中的方法是通過(guò) 設(shè)置父元素的height和line-height高度一致來(lái)實(shí)現(xiàn)的。height是該元素的高度，line-height是行高，也就是行間距，是行與行之間的基線(xiàn)間的距離。line-height與font-size的計(jì)算值之差分為兩半(在CSS中稱(chēng)為"行間距")，分別加到一個(gè)文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。這種文字行高與塊高一致帶來(lái)了一個(gè)弊端，就是當(dāng)文字內(nèi)容的長(zhǎng)度大于塊的寬度的時(shí)候，就會(huì)有內(nèi)容脫離了塊。

<div class="container">
    hello,world!
</div>
 
<style>
.container{
    height:10px;
    line-height:10px;
}
</style>

父元素高度確定的多行文本

父元素高度確定的多行文本、圖片等豎直居中有兩種方式，第一種是插入table標(biāo)簽，然后設(shè)置vertical-align:middle。CSS中有一個(gè)用于豎直居中的屬性vertical-align，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類(lèi)型的子元素都有用。

/* 方式一 */
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>居中一下</p>
</div>
</td></tr></tbody></table>
</body>
 
<style>
table td{
    height:500px;
    background:#ccc;
}
</style>
 
/* 方式二 */
<div class="container">
    <div>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
        <p>居中一下下</p>
    </div>
</div>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell，激活 vertical-align 屬性，但注意 IE6、7 并不支持這個(gè)樣式。

隱性改變display類(lèi)型

在我們開(kāi)發(fā)過(guò)程中當(dāng)為元素設(shè)置 position:absolute 或者 float:left 屬性的時(shí)候，元素的顯示類(lèi)型就會(huì)自動(dòng)變?yōu)橐詃isplay:inline_block (塊級(jí)元素)的方式顯示，可以設(shè)置元素的width和height。

<div class="container">
    <a href="#" title="">點(diǎn)這里看看</a>
</div>
<style>
.container a{
    position；absolute;
    width:200px;
    background:#ccc;
}
</style>

相關(guān)推薦：

css html元素居中與html元素內(nèi)容居中的區(qū)別

html的元素水平垂直居中應(yīng)該怎么設(shè)置

以上就是html中居中設(shè)置方法介紹（代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。