CSS Vertical Align(用純CSS解決div垂直置中)

本文出處:http://blog.yam.com/hanasan/article/35806444

本次要介紹的是CSS垂直置中(Vertical Align with css)的完整解決整理。
說實話這並不太容易,雖然不像水平置中 {margin:0 auto;} 那樣單純, 但仍有幾種方式可以作到,以下共有五種方式一一介紹。

每種使用方式各有其優、缺點,端看自己要置中的內容是「區塊」或是「文字」來取捨。

方法一

使用CSS table-cell屬性來完成,什麼是table-cell?簡單說就是針對一些html object附于它table的屬性(詳見此), 如果曾經使用過table來排版的網頁開發者,應該知道td的既有屬性valign,古早以前根本不會有垂直置中的問題,因為td下個 valign=”middle”就行了。 而table-cell即是可以將div模擬成表格(table)的儲存格(td),讓原本不存在vertical-align的div可以使用。

Sample Code

HTML

CSS

優點:

  1. 因為是CSS2.1釋出的標準屬性,正規的解決方法。
  2. 被置中的內容增加後,垂直置中的block會自動調整。

缺點:

  1. 支援性不佳,IE8以上才支援(IE7以下不支援display:table語法)
  2. 太多巢狀標籤(有種回到過去table排版的fu)

方法二

此方法適用在定義了絕對定位(absolute)的div, 將其top設置為50%, 再設置與div高度一半的「負」值margin-top,意謂著使用本方法必須固定div的高度。

Sample Code

HTML

CSS

優點:

  1. 程式碼簡短,且無需為了「垂直置中」的目的多寫巢狀標籤
  2. 所有browser都支援,泛用性高

缺點:

  1. div高度需固定,若是動態資料有可能超過的話需要加上overflow:scroll讓溢出的內容可以看見

方法三

 

在需要被垂直置中的div前放置另一個div,設置為height:50%,margin-bottom:-contentHeight(目標高度的負值)

Sample Code

HTML

CSS

優點:

  1. 所有browser都支援(Note:IE7必須在#floater追加width:1px才work!)
  2. 當內容增加時,垂直置中的div不會被切掉,而是會自動出現scroll-bar

缺點:

  1. 沒甚麼缺點,真要說就是一樣高度得固定。另外若置中物件的父層是body, 即使視窗被USER拖曳拉小了,div也一樣會唯持置中(笑)

方法四

本法使用在同樣是絕對定位(absolute)的div上,固定高度,並定義top:0; bottom:0; 和廣為被應用的
{ margin:0 auto; }作div水平置中原理類似

Sample Code

HTML

CSS

優點:

  1. 簡單

缺點:

  1. 不支援IE7(含)以下
  2. 如果容器不夠裝內文, 也不會有scrollbar自動出現…

方法五

此方法適用於「單行」文字的垂直置中(EX:要作英文網站大Slogan時), container除了設置高度之外,同時也將行距(line-height)設置與高度相等。

Sample Code

HTML

CSS

優點:

  1. 簡單
  2. 所有browser都支援(even IE6!)
  3. 即使內容溢出也不會被切掉

缺點:

  1. 只有單行文字適合
  2. 若div寬度固定,一當有長文字爆行時會很醜,務必小心使用。

以上列出五種使用純CSS(不加js)達成div vertical align(垂直置中)的藥方,可以綜合搭配使用,也可視情況單獨使用…

JQuery選擇器

1. 選擇所有的table

2. 選擇第N行(若有很多table則只會選第一個table的第N行)

3. 選擇第N行(若有很多table則會選擇每個table的第N行)

4. 選奇偶行

3. 選第一個元素

下面是相關選擇器的一個小範例

下面是顯示的結果


1,0 2,0 3,0 4,0 5,0
1,1 2,1 3,1 4,1 5,1
1,2 2,2 3,2 4,2 5,2
1,3 2,3 3,3 4,3 5,3
1,4 2,4 3,4 4,4 5,4


相關文章:
jQuery 參考手冊 – 選擇器 (http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp)

jQuery 選擇器

選擇器 實例 選取
* $(“*”) 所有元素
#id $(“#lastname”) id=”lastname” 的元素
.class $(“.intro”) 所有 的元素
element $(“p”) 所有 <p> 元素
.class.class $(“.intro.demo”) 所有 且 的元素
:first $(“p:first”) 第一個 <p> 元素
:last $(“p:last”) 最後一個 <p> 元素
:even $(“tr:even”) 所有偶數 <tr> 元素
:odd $(“tr:odd”) 所有奇數 <tr> 元素
:eq(index) $(“ul li:eq(3)”) 列表中的第四個元素(index 從 0 開始)
:gt(no) $(“ul li:gt(3)”) 列出 index 大於 3 的元素
:lt(no) $(“ul li:lt(3)”) 列出 index 小於 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不為空的 input 元素
:header $(“:header”) 所有標題元素 <h1> – <h6>
:animated 所有動畫元素
:contains(text) $(“:contains(‘W3School’)”) 包含指定字符串的所有元素
:empty $(“:empty”) 無子(元素)節點的所有元素
:hidden $(“p:hidden”) 所有隱藏的 <p> 元素
:visible $(“table:visible”) 所有可見的表格
s1,s2,s3 $(“th,td,.intro”) 所有帶有匹配選擇的元素
[attribute] $(“[href]”) 所有帶有 href 屬性的元素
[attribute=value] $(“[href=’#’]”) 所有 href 屬性的值等於 “#” 的元素
[attribute!=value] $(“[href!=’#’]”) 所有 href 屬性的值不等於 “#” 的元素
[attribute$=value] $(“[href$=’.jpg’]”) 所有 href 屬性的值包含以 “.jpg” 結尾的元素
:input $(“:input”) 所有 <input> 元素
:text $(“:text”) 所有 type=”text” 的 <input> 元素
:password $(“:password”) 所有 type=”password” 的 <input> 元素
:radio $(“:radio”) 所有 type=”radio” 的 <input> 元素
:checkbox $(“:checkbox”) 所有 type=”checkbox” 的 <input> 元素
:submit $(“:submit”) 所有 type=”submit” 的 <input> 元素
:reset $(“:reset”) 所有 type=”reset” 的 <input> 元素
:button $(“:button”) 所有 type=”button” 的 <input> 元素
:image $(“:image”) 所有 type=”image” 的 <input> 元素
:file $(“:file”) 所有 type=”file” 的 <input> 元素
:enabled $(“:enabled”) 所有激活的 input 元素
:disabled $(“:disabled”) 所有禁用的 input 元素
:selected $(“:selected”) 所有被選取的 input 元素
:checked $(“:checked”) 所有被選中的 input 元素

初探HTML5的WebSockets

我是參照這個教程下去學習的

Start Using HTML5 WebSockets Today
http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/

 

【Server設定方法】

1. 先下載WebSockets Server端的程式
http://nettuts.s3.amazonaws.com/751_webSocketsStarter/websocket_source_files.zip

2. 下載最新版的xampp
http://www.apachefriends.org/zh_tw/xampp.html
在這邊我下載的是XAMPP Windows 1.8.0的版本,其相關的細項版本如下:
Apache 2.4.2, MySQL 5.5.25a, PHP 5.4.4, OpenSSL 1.0.1c, phpMyAdmin 3.5.2, XAMPP Control Panel 3.0.12, Webalizer 2.23-04, Mercury Mail Transport System v4.62, FileZilla FTP Server 0.9.41, Tomcat 7.0.28 (with mod_proxy_ajp as connector), Strawberry Perl 5.16.0.1 Portable
For Windows 2000, XP, Vista, 7.
不過最主要的還是

3. 執行shell

輸入php -c php\php.ini htdocs\socket\server\startDaemon.php

不過我試了半天 是試不起來的=口=!

會出現錯誤 或是瞬間又關掉socket連線

SERVER端訊息如下

# php -c php\php.ini htdocs\socket\server\startDaemon.php
2012-10-04 08:08:20 System: Socket Resource id #7 created.
2012-10-04 08:08:21 System: Socket bound to localhost:8000.
2012-10-04 08:08:21 System: Start listening on Socket.
2012-10-04 08:08:41 WebSocket: Resource id #8 CONNECTED!
2012-10-04 08:08:41 WebSocket: Resource id #9 CONNECTED!
2012-10-04 08:08:41 WebSocket: Requesting handshake…
2012-10-04 08:08:41 WebSocket: Handshaking…
2012-10-04 08:08:41 WebSocket: Done handshaking…
2012-10-04 08:08:42 WebSocket: Resource id #10 CONNECTED!
2012-10-04 08:08:42 WebSocket: Resource id #11 CONNECTED!
2012-10-04 08:08:43 WebSocket: Resource id #12 CONNECTED!

然後網頁則是從零直接跳到三

Socket Status: 0
Socket Status: 3 (Closed)

比較奇特的是,網頁部份我必需改動成這樣

否則會沒有半點反應。
但改成那樣之後,也是會連接失敗瞬間關掉,不知道是出什麼問題。

如果有大德們知道問題點希望可以留言告知,我再繼續試試~~XD