首頁 >web前端 >html教學 >html中居中設定方法介紹（程式碼）

html中居中設定方法介紹（程式碼）

不言原創: 2018-09-01 10:49:3212229瀏覽

這篇文章帶給大家的內容是關於html中居中設定方法介紹（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

#水平居中

在實際開發過程中我們會遇到很多需要元素水平居中的情況，例如文章標題等。這裡常見的水平居中情況有行內元素和塊級元素兩種，塊級元素又分為定寬塊級元素和不定寬塊級元素兩種情況。定寬塊級元素顧名思義就是塊級元素的width是個固定的值；那麼不定寬塊級元素我們就知道是塊級元素的width不是個定值的情況。

行內元素

當被設定的元素是文字、圖片等行內元素的時候，我們是透過給父元素設定text-align:center 來實現的。

<body>
    <div class="textCenter">这是一个在父元素中居中元素</div>
</body>
<style>
    textCenter{
    text-align:center;
    }
</style>

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

定寬塊級元素

滿足定寬塊級元素"定寬"和"塊級元素"兩個條件是可以透過設定左右margin的值為auto來實現居中。

<body>
    <div>水平居中的定宽块级元素</div>
</body>
<style>
    div{
        border:1px solid blue;
        width:100px;    /*宽度设置固定值*/
        margin:10px auto;
    }
</style>
/*或者也可以写成 margin-left:auto;
               margin-right:auto;*/
/* 元素的上下margin属性可以照常设置，不受影响 */

不定寬區塊級元素

不定寬區塊級元素的居中方法有三種：第一個是加入table標籤；第二種是設定display: inline方法，與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設定；第三種方法是設定position:relative和left:50%，利用相對定位的方式，將元素向左偏移50%用以達到居中的目的。

加入table標籤

加入table標籤是利用table標籤的長度自適應（不定義其長度也不預設父元素body的長度，table長度是根據內文長度決定的），因此可以看作一個定寬塊級元素，然後再利用定寬塊級元素居中的margin方式使其水平居中。

使用的方式第一步為需要設定居中的元素外面加上一個table標籤，然後為這個table設定"左右margin置中"

<div>
    <table>
        <tbody>
            <tr><td>
            <ul>
                <li>锄禾日当午</li>
                <li>汗滴禾下土</li>
                <li>谁知盘中餐</li>
                <li>粒粒皆辛苦</li>
            </ul>
            </td></tr>
        </tbody>
    </table>
</div>
<style>
    table{
    border:1px solid;
    margin:0 auto;
    }
</style>

設定display:inline方法

改變區塊級元素的display為inline類型，設定為行內元素顯示，然後使用text-align:center來實現居中顯示。這種方法相較於設定table方式的優點是不用增加無語意標籤，但這種方式也存在一定的問題，就是它將塊狀元素的display改為inline，元素變成行內元素後會少了一些功能使用。

<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>

設定position:relative和left:50%

透過為父元素設定float，然後設定position:relative和left:50%，子元素設定position :relative和left:50%來實現水平居中。

<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>

垂直居中

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

父元素高度決定的單行文字

父元素高度決定的單行文字垂直居中的方法是透過設定父元素的height和line-height高度一致來實現的。 height是該元素的高度，line-height是行高，也就是行間距，是行與行之間的基線間的距離。 line-height與font-size的計算值之差分為兩半(在CSS中稱為"行間距")，分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。這種文字行高與區塊高一致帶來了一個弊端，就是當文字內容的長度大於區塊的寬度的時候，就會有內容脫離了區塊。

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

父元素高度決定的多行文字

父元素高度決定的多行文字、圖片等垂直居中有兩種方式，第一種是插入table標籤，然後設定vertical-align:middle。 CSS中有一個用於垂直居中的屬性vertical-align，在父元素設定此樣式時，會對inline-block類型的子元素都有用。

/* 方式一 */
<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 以上的瀏覽器下可以設定區塊級元素的 display 為 table-cell，啟動 vertical-align 屬性，但注意 IE6、7 並不支援這個樣式。

隱性改變display類型

在我們開發過程中當為元素設定position:absolute 或float:left 屬性的時候，元素的顯示類型就會自動變成以display:inline_block (區塊級元素)的方式顯示，可以設定元素的width和height。

<div class="container">
    <a href="#" title="">点这里看看</a>
</div>
<style>
.container a{
    position；absolute;
    width:200px;
    background:#ccc;
}
</style>

html中居中設定方法介紹（程式碼）

相關文章