CSS進階之CSS的技巧分享-css教學-PHP中文網

CSS進階之CSS的技巧分享

高洛峰

發布： 2017-03-23 11:28:42

原創

1299 人瀏覽過

如何設定水平居中？

分成兩種情況行內元素與區塊級元素

1.行內元素（如圖片文字）

   div.textcenter{
   text-align:center;
   }
   <div class="textcenter">hello joe!</div>

登入後複製

2.區塊級元素

區塊級元素的水平居中又分為兩個定寬塊狀元素與非定寬塊狀元素

定寬塊狀元素（即塊狀元素的width值是定值)：

可以透過區塊級元素的左右margin為auto來實現中如下

   div{
   border:1px solid red;
   width:500px;/*定宽*/
   margin:30px auto;/*margin-right margin-left为auto*/
   }
   <div>I am middle placed.</div>

登入後複製

不定寬塊狀元素（即寬度width不確定例如網頁上的分頁導航）

第一種方法：利用table標籤

利用table標籤的長度適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中

第一步：為需要設定的居中的元素外面加入一個table 標籤( 包括、、 )。

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

   table{
   margin: 0 auto;
   }
   ul{list-style:none;/*将小圆点去掉*/}
   li{float:left;display:inline;margin-right:5px;}
   <table>
       <tbody>
           <tr> <td>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
             <ul>
            </td></tr>
       </tbody>
   </table>

登入後複製

第二種方法：改變區塊級元素的 display 為 inline 類型（設定為行內元素顯示），然後使用 text-align:center 來實現居中效果。如下範例：

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

登入後複製

與第一個方法相比不用加入無語意標籤（table）但是由於li被視為行內元素，所以無法為其設定height,width等屬性

第三種方法：透過為父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。

   .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;
   }
   <div class="container">
     <ul>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
     </ul>
   </div>

登入後複製

2.如何設定垂直居中？

分為兩種情況，父元素高度確定的單行文本，父元素高度確定的多行文本。

單行文字：透過設定line-height 與height一致實現垂直居中

line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距」。分為兩半，分別加到一個文字行內容的頂部和底部。

這種文字行高與區塊高一致帶來了一個弊端：當文字內容的長度大於區塊的寬時，就有內容脫離了區塊。

.container{
    line-height:100px;
    height:100px;
    background:purple;
}
<div class="container"><h1>Hello World!</div>

登入後複製

CSS進階之CSS的技巧分享但是該方法有一個弊端：當文字的長度長於區塊的寬度的時候，內容就脫離了區塊。

多行文字：

有兩種方法：

使用table標籤使用vertical-align:middle（注意td標籤預設就設定了vertical-align :middle

所以不需要我們手動設定。設定以下兩個語句之一的話：

float:right 或float:right

position:absolute CSS進階之CSS的技巧分享

元素的display類型就會自動變成display:inline- block 此時就可以設定元素的寬和高了例如

table td{
height:500px;
background:#purple;
}
<table>
    <tbody>
    <tr><td>
    <div>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    </div>
    </tr></tr>
    </tbody>
</table>

登入後複製

以上是CSS進階之CSS的技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！