CSS樣式設置小技巧

時間 2019-11-08

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

原文原文鏈接

　　1.水平居中設置　

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

HTML代碼
<body>
  <div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>
CSS代碼
<style>
  .txtCenter{
    text-align:center;
  }
</style>

　　　　定寬塊狀元素居中設置：知足定寬和塊狀兩個條件的元素是能夠經過設置「左右margin」值爲「auto」來實現居中的。代碼示例以下：git

HTML代碼
<body>
  <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>
CSS代碼
<style>
div{
    border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/
    
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */
}
</style>

　　　　不定寬塊狀元素居中設置：github

1. 加入 table 標籤，是利用table標籤的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），所以能夠看作一個定寬度塊元素，而後再利用定寬度塊狀居中的margin的方法，使其水平居中。代碼示例以下：

HTML代碼
<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
CSS代碼
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

　　　　　　2.設置 display: inline 方法：改變塊級元素的 display 爲 inline 類型（設置爲行內元素顯示），而後使用 text-align:center 來實現居中效果。代碼以下：chrome

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;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

　　　　　　3.設置 position:relative 和 left:50%：經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。代碼以下：瀏覽器

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

　　2.垂直居中設置

　　　　　父元素高度肯定的單行文本:app

　　　　　　　父元素高度肯定的單行文本的豎直居中的方法是經過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的基線間的距離 )。代碼以下：spa

HTML代碼
<div class="container">
    hello, world!
</div>
CSS代碼
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

　　　　　父元素高度肯定的多行文本:firefox

　　　　　　　1.使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。css 中有一個用於豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。代碼以下：code

HTML代碼
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否能夠居中。</p>
</div>
</td></tr></tbody></table>
</body>
CSS代碼
table td{height:500px;background:#ccc}
/*由於 td 標籤默認狀況下就默認設置了 vertical-align 爲 middle，因此咱們不須要顯式地設置了。*/

　　　　　　　2.在 chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的 display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align屬性，但注意 IE六、7 並不支持這個樣式, 兼容性比較差。代碼以下:blog

HTML代碼
<div class="container">
    <div>
        <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並且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。

　　3.隱性改變display類型　　

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

　　　　　　 1. position : absolute

　　　　　　 2. float : left 或 float:right

　　　　時，元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，固然就能夠設置元素的 width 和 height 了，且默認寬度不佔滿父元素。代碼以下：

HTML代碼
<div class="container">
    <a href="#" title="">進入課程請單擊這裏</a>
</div>
CSS代碼
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>