CSS樣式設置小技巧——居中設置

時間 2019-11-09

標籤 css 樣式設置技巧居中欄目 CSS 简体版

原文原文鏈接

1、水平居中設置-行內元素

咱們在實際工做中常會遇到須要設置水平居中場景，今天咱們就來看看怎麼設置水平居中的。css

若是被設置元素爲文本、圖片等行內元素時，水平居中是經過給父元素設置 text-align:center 來實現的。以下代碼：html

html代碼：chrome

<body>
  <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中顯示。</div>
</body>

css代碼：瀏覽器

<style>
  div.txtCenter{
    text-align:center;
  }
</style>

2、水平居中設置-定寬塊狀元素

當被設置元素爲塊狀元素時用 text-align：center 就不起做用了，這時也分兩種狀況：定寬塊狀元素和不定寬塊狀元素。這一小節咱們先來說一講定寬塊狀元素。spa

知足定寬和塊狀兩個條件的元素是能夠經過設置「左右margin」值爲「auto」來實現居中的。咱們來看個例子就是設置 div 這個塊狀元素水平居中：firefox

html代碼：code

<body>
  <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>

css代碼：htm

<style>
div{
    border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
    width:500px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
</style>

也能夠寫成：圖片

margin-left:auto;
margin-right:auto;

注意：元素的「上下 margin」是能夠隨意設置的。it

3、水平居中總結-不定寬塊狀元素方法（一）

在實際工做中咱們會遇到須要爲「不定寬度的塊狀元素」設置居中，好比網頁上的分頁導航，由於分頁的數量是不肯定的，因此咱們不能經過設置寬度來限制它的彈性。

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都比多）：

加入 table 標籤
設置 display;inline 方法
設置 position:relative 和 left:50%;

這一小節咱們來說一下第一種方法：

第一步：爲須要設置的居中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。

第二步：爲這個 table 設置「左右 margin 居中」（這個和定寬塊狀元素的方法同樣）。

舉例以下：

html代碼：

<div>
<table>
  <tbody>
    <tr><td>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

css代碼：

<style>
table{
    margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>

4、水平居中總結-不定寬塊狀元素方法（二）

第二種方法：改變塊級元素的 display 爲 inline 類型，而後使用 text-align:center 來實現居中效果。以下例子：

html代碼：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

<style>
.container{
    text-align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}
</style>

‍‍這種方法相比第一種方法的優點是不用增長無語義標籤，簡化了標籤的嵌套深度，但也存在着一些問題：它將塊狀元素的 display 類型改成 inline，變成了行內元素，因此少了一些功能，好比設定長度值。‍‍

5、水平居中總結-不定寬塊狀元素方法（三）

方法三：經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。

代碼以下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

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

這種方法能夠保留塊狀元素仍以 display:block 的形式顯示，優勢不添加無語議表標籤，不增長嵌套深度，但它的缺點是設置了 position:relative，帶來了必定的反作用。

這三種方法使用得都很是普遍，各有優缺點，具體選用哪一種方法，能夠視具體狀況而定。

6、垂直居中-父元素高度肯定的單行文本

父元素高度肯定的單行文本的豎直居中的方法是經過設置父元素的 height 和 line-height 高度一致來實現的。以下代碼：

<div class="container">
    hi,imooc!
</div>

css代碼：

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

7、垂直居中-父元素高度肯定的多行文本（方法一）

父元素高度肯定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：

方法一：使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。

說到豎直居中，css 中有一個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素爲 td 或 th 時，纔會生效。因此又要插入 table 標籤了。下面看一下例子：

html代碼：

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否能夠居中。</p>
    <p>看我是否能夠居中。</p>
    <p>看我是否能夠居中。</p>
    <p>看我是否能夠居中。</p>
    <p>看我是否能夠居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代碼：

table td{height:500px;background:#ccc}

由於 td 標籤默認狀況下就默認設置了 vertical-align 爲 middle，因此咱們不須要顯式地設置了。

8、垂直居中-父元素高度肯定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的 display 爲 table-cell，激活 vertical-align 屬性，但注意 IE六、7 並不支持這個樣式。

html代碼：

<div class="container">
    <div>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
    </div>
</div>

css代碼：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

這種方法的好處是不用添加多餘的無心義的標籤，但缺點也很明顯，它的兼容性不是很好，不兼容 IE六、7。

9、隱性改變display類型

有一個有趣的現象就是當爲元素（不論以前是什麼類型元素，display:none 除外）設置如下 2 個句之一：

position : absolute
float : left 或 float:right

元素會自動變爲以 display:inline-block 的方式顯示，固然就能夠設置元素的 width 和 height 了且默認寬度不佔滿父元素。

以下面的代碼，小夥伴們都知道 a 標籤是行內元素，因此設置它的 width 是沒有效果的，可是設置爲 position:absolute 之後，就能夠了。

<div class="container">
    <a href="#" title="">進入課程請單擊這裏</a>
</div>

css代碼

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。