亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css水平居中的各種方法總結(推薦)

  發(fā)布時間：2016-06-03 08:52:59   作者：佚名   我要評論
下面小編就為大家?guī)硪黄猚ss水平居中的各種方法總結(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

但是，有時候會發(fā)現這樣寫了也沒出效果。原因是什么呢？  請往下看。

水平居中：分為塊級元素居中和行元素居中

行內元素：

行內元素就是內聯元素。例如<span>、<a>、<label>、<em>、<img>等。。

直接構建一個具有 ”text-align:center“樣式的容器，那么里面包含的行內元素就會都居中了。

XML/HTML Code復制內容到剪貼板
  1. <div style="text-align:center;border-style:solid">  
  2.         <p style="border-style:solid">我是塊級元素，我不居中</p>  
  3.         <span style="border-style:solid">我是行內元素，我要居中</span>  
  4.     </div>  

效果如圖：

有沒有發(fā)現不對，塊級元素怎么“看起來”也居中了？給<p>加上寬度后：

XML/HTML Code復制內容到剪貼板
  1. <div style="text-align:center;border-style:solid">  
  2.         <p style="border-style:solid;width:500px">我是塊級元素，我不居中</p>  
  3.         <span style="border-style:solid">我是行內元素，我要居中</span>  
  4.     </div>  

效果如圖：

原來只是里面的文本居中了!

那么下面看塊級元素居中。大家都知道塊級元素是可以設置height和width的，那么這就又

分為定寬與不定寬。

定寬：

定寬其實很好解決。直接margin:0 auto就可以實現容器居中，再加上text-align:center才可以讓文本居中。

    <p style="border-style:solid;text-align:center;margin:0 auto;width:500px">我是定寬塊級元素，我要居中</p>

效果如圖：

不定寬：

不定寬其實是用的最多的，如這種導航欄：

因為導航欄中的內容是會變化的，所以寬度就不能定死了。要居中的話有三種方法，其中一種是利用table標簽的特性，感覺適用性不是很好就不介紹了。

1、直接把元素改為行內元素，既display:inline，然后就可以用text-align:center了。但是這樣width和height就不能設置了。

css：

CSS Code復制內容到剪貼板
  1. .container{   
  2.     text-align:center;   
  3. }   
  4. .container ul{   
  5.     list-style:none;   
  6.     padding:0;   
  7.     display:inline;   
  8. }   
  9. .container li{   
  10.     margin-right:8px;   
  11.     border-style: solid;   
  12.     display:inline;   
  13. }  

body:

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.     <ul>  
  3.         <li><a href="#">1</a></li>  
  4.         <li><a href="#">2</a></li>  
  5.         <li><a href="#">3</a></li>  
  6.     </ul>  
  7. </div>  

效果下：

2、下面使用父級元素浮動和相對定位以及l(fā)elf:50%。子元素照樣設置但left:-50%。

整改后的css代碼：

CSS Code復制內容到剪貼板
  1. .container ul{   
  2.     list-style:none;   
  3.     float: left;   
  4.     position: relative;left: 50%;   
  5.     padding:0;   
  6. }   
  7. .container li{   
  8.     margin-right:8px;   
  9.     float: left;   
  10.     position: relative;left:-50%;   
  11. }  

效果是一樣的，就不貼圖了。（首先，ul設置左浮動是為了 使得ul的寬度不是100%，而是 幾個li寬度的總和。 之后ul相對定位 使用left把ul移動到劇中位置。因為相對定位是以原來的位置為原點的，所以先整體移動中間，這樣子元素的左邊是中心線，那么只要left:-50% 或者right:50%就居中了）

以上這篇css水平居中的各種方法總結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/zuochengsi-9/archive/2016/06/02/5554340.html

相關文章

  • 淺談css處理水平居中的問題

    下面小編就為大家?guī)硪黄獪\談css處理水平居中的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
    2016-09-04

  • Flexbox制作CSS布局實現水平垂直居中的簡單實例

    下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現水平垂直居中的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-27

  • 關于css水平居中的小小探討

    下面小編就為大家?guī)硪黄P于css水平居中的小小探討。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-29

  • 淺析CSS實現水平垂直同時居中的5種思路

    下面小編就為大家?guī)硪黄獪\析CSS實現水平垂直同時居中的5種思路。小編覺得挺不錯的，現在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
    2016-04-28

  • CSS實現水平居中的4種思路簡要概述

    水平居中是經常遇到的問題?？此品椒ㄝ^多，條條大路通羅馬。但系統梳理下，其實都圍繞著幾個思路展開。本文將介紹關于水平居中的4種思路，感興趣的朋友參考下吧
    2016-04-27

  • css三種方法實現div在瀏覽器水平居中

    這篇文章主要介紹了css三種實現div在瀏覽器水平居中的方法，感興趣的小伙伴們可以參考一下
    2016-04-14

  • CSS水平居中總結(新手必看篇)

    下面小編就為大家?guī)硪黄狢SS水平居中總結(新手必看篇)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-08

最新評論