css樣式設置的小技巧

2024-04-27 15:12:03

字體：大中小

來源：轉載

供稿：網友

CSS樣式設置的小技巧

水平居中設置——行內元素 :text-align:center;

水平居中設置——定寬塊狀元素： margin：0 ，auto；水平居中設置——不定寬度的塊狀元素（這三種方法目前使用的都很多）：加入 table 標簽設置 display: inline 方法：與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

第一種：

為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。

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

第二步：為這個 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>第二種方法：
改變塊級元素的 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;}/* 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>方法三：
通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。
我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。
 
代碼如下：
<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>垂直居中-父元素高度確定的單行文本
我們在實際工作中也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設置為垂直居中，為了用戶體驗性好。
這里我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。
本節我們先來看第一種父元素高度確定的單行文本, 怎么設置它為垂直居中呢？
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。
line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文本行內容的頂部和底部。
這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大于塊的寬時，就有內容脫離了塊。
<div class="container">    hi,imooc!</div>css代碼：
<style>.container{    height:100px;    line-height:100px;    background:#999;}</style>垂直居中-父元素高度確定的多行文本
方法一：使用插入 table  (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。
css 中有一個用于豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。
方法二：在 Chrome、Firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align屬性，但注意 IE6、7 并不支持這個樣式, 兼容性比較差。<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>第三種方法：用偽類的方法<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .wrapper{            width:200px;            height: 200px;            background:skyblue;            font-size:0;        }        .wrapper:before{            content:'';            display:inline-block;            vertical-align:middle;            height: 100%;        }        .content{            display:inline-block;            text-align:center;            font-size:16px;        }    </style></head><body> <div class="wrapper">     <div class="content"><span>多行文字居中多行文字居中</span>多行文字居中</div> </div></body></html>