CSS樣式設置技巧總結

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

不定塊狀元素居中方法

下面來詳細介紹一下這幾種方法:

1.加入table標簽

? ? ? ?利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度(table其長度根據其內文本長度決定),因此可以看做一個定寬度塊元素,然后再利用定寬度塊狀居中的margin的方法,使其水平居中。

步驟:(1)為所要設置的元素添加<table>標簽(包括<tbody>,<tr>,<td>)。

? ? ? ? (2)為這個 table 設置“左右 margin 居中”(這個和定寬塊狀元素的方法一樣)。

2.改變塊級元素的 display 為 inline 類型(設置為行內元素顯示),然后使用text-align:center來實現居中效果

代碼如下:.container ul

{ ??list-style:none; ??

margin:0;? ?

padding:0;

display:inline;}

.container{

text-align:center;}

3.通過給父元素設置float,然后給父元素設置position:relative和left:50%,子元素設置position:relative和left:-50%來實現水平居中。

代碼如下:

.container{

float:left;

position:relative;

left:50%}


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

? ? ? 我們在實際工作中也會遇到需要設置垂直居中的場景,比如好多報紙的文章標題在左右一側時,常常會設置為垂直居中,為了用戶體驗性好。這里我們又得分兩種情況:

(1)父元素高度確定的單行文本

(2)父元素高度確定的多行文本

三、垂直居中-父元素高度確定的多行文本

父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種:

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

css中有一個用于豎直居中的屬性vertical-align,在父元素設置此樣式時,會對inline-block類型的子元素都有用。下面看一下例子:

代碼如下:

<body>

<table>

? ? ? <tbody>

? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ?<td class="wrap">

? ? ? ? ? ? ? ? ? ? ? ? ?<div><p>實現居中</p></div>

? ? ? ? ? ? ? ? ? ? ? </td>?

? ? ? ? ? ? ? ?</tr>

? ? ? </tbody>

</table>

</body>

方法二、在chrome、firefox及IE8以上的瀏覽器下可以設置塊級元素的display為table-cell(設置為表格單元顯示),激活vertical-align屬性,但注意IE6、7并不支持這個樣式,兼容性比較差。

方法三、隱性改變display類型

1.position : absolute

2.?float : left 或float:right

簡單來說,只要html代碼中出現以上兩句之一,元素的display顯示類型就會自動變為以display:inline-block(塊狀元素)的方式顯示,當然就可以設置元素的width和height了,且默認寬度不占滿父元素。

設置行內元素的width是 沒有效果的,但是設置為position:absolute以后,就可以設置width了。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,814評論 1 92
  • 一 外部式css樣式 (也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css...
    KunMitnic閱讀 965評論 0 1
  • 本文主要是起筆記的作用,內容來自慕課網. 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,664評論 0 30
  • CSS格式化排版 1、字體 我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例...
    張文靖同學閱讀 1,310評論 0 3
  • 荷。 淡雅,盈盈。 枝不染,葉輕柔。 清波微漾,水影橫搖。 曉風拂碧蓮,明月染荷香。 一葉扁舟搖曳,兩縷閑愁飄淡。...
    清風自來閱讀 516評論 6 6