vertical-align trong css _ học thiết kế web theo chuẩn.

Vertical-align trong CSS | Học thiết kế web theo chuẩn.NAVIGATION Xuất bản SWF Player V1.1 Tìm hiểu về Z-index trong CSS Quá trình tạo một trang web Firebug – Webmaster cần có Không nên

Trang 1

Vertical-align trong CSS | Học thiết kế web theo chuẩn.

NAVIGATION

Xuất bản SWF Player V1.1 Tìm hiểu về Z-index trong CSS Quá trình tạo một trang web Firebug – Webmaster cần có Không nên dùng WYSIWYG Editor

Thứ bậc trong XHTML Nguồn icon miễn phí Làm gì để được Bookmark Tránh xa những nơi “không giới hạn”

Tạo WordPress Theme – Intro

PHP CO BẢN – NÂNG CAO

tìm hiểu cú pháp và phương thức PHP Phép toán và phát biểu có điều kiện trong php

$_POST và $_GET Làm quen đối tượng Session Khai báo hàm, chèn tập tin và tập tin dùng chun Cách xử lý chuỗi, mảng, kiểu DataTime Thao tác trên cơ sở dữ liệu MySQL PHP và Database

Phân trang với PHP

Xóa, Cập nhật dữ liệu dạng mảng Tạo Mailing List: PHP & Mysql

RECENT COMMENTS

EMAIL ARTICLES

Vertical-align trong CSS

Tính năng Vertical-align trong CSS được kế thừa từ “thời đại” sử

dụng bảng để thiết kế giao diện Hiện tại tính năng valign trong table

đã bị “đào thải” và không còn được sử dụng đúng chuẩn web nữa Nhưng thay vào đó CSS

lại giới thiệu một tính năng khác nghe tên hoàn toàn giống với valign là Vertical-align Chính

vì điều này nên đã gây ra một số hiểu lầm về nó Trong bài này chúng ta sẽ xem xét cách sử

dụng vertical-align trong CSS

Trên thực tế rất ít khi bạn phải sử dụng tính năng vertical-align trong CSS trừ khi bạn đang

thiết kế bảng với dữ liệu cần căn chỉnh vào giữa dòng Nhưng theo kinh nghiệm cá nhân tôi,

khi làm giao diện tôi rất ít khi sử dụng vertical-align bởi vì nó thực sự không cần thiết Do

chúng ta có thể sử dụng padding và margin để điều khiển nó tới vị trí mà mình muốn Nhưng

với những người mới học CSS và vừa thoát ra khỏi cách thiết kế bằng bảng thì cái “lối mòn”

cũ vẫn chưa hoàn toàn bỏ được Chính vì vậy nhiều người mới hỏi tại sao khi sử dụng

vertical-align: middle trong thẻ div nó lại không cho kết quả như mong muốn

Nói chung cách sử dụng vertical-align trong CSS để căn chỉnh một thành phần không phải là

table cell cũng không hề đơn giản mà cũng lắm nhiêu khê Có nhiều cách hoàn toàn không

tương thích với các trình duyệt đặc biệt là IE (kể cả IE 8) Vậy nên khi quyết định sử dụng

vertical-align để căn chỉnh thành phần trong block element như <div> bạn nên suy nghĩ cho

kỹ Tuy nhiên vì bạn vẫn muốn làm hoặc bắt buộc phải làm thì dưới đây là một số cách bạn

có thể áp dụng được

Trong cách này chúng ta sẽ biến một thẻ <div> thành một table cell và do đó có thể áp dụng

vertical-align bình thường Cái hay của cách này là ngắn gọn và lẹ nhưng nó không tương

thích với trình duyệt IE (kể cả IE 8 beta) Cho nên bạn cũng cần suy nghĩ ở đây

1 <div id= "container" >

2 <div id= "content" >

3 <p >Lorem ipsum dolor sit amet.</p

4 </div>

5 </div>

1 #container {display: table;}

CSS

CSS Cơ bản

jQuery

jQuery Cơ bản

Phát triển Web

Bài viết, kinh nghiệm

Videos

Các thể loại

WordPress

Tutorials, Hacks

Trang 2

Nh ững bài viết có liên quan

Thứ bậc trong XHTML

Tìm hiểu về Z-index trong CSS

Absolute Position trong thiết kế giao diện

Viết tắt trong CSS

Câu Đố Trong Tuần 1

QUẢNG CÁO

Your Ad Here for Free

$20 in Free Clicks to place your ad here Join Free now!

www.your-site.com

Tạo WordPress Theme – Dựng xHTML ( 16 )

chicken_roll : hahaha hay quá hết chổ trê (thanks you very much much…) nghe anh nói đây ko

Tạo WordPress Theme – Slice hình ( 22 )

chicken_roll : ui ui hay quá cảm ỏn nhiều học rất nhiều

từ anh và Anh CS thanks phát cho có

Tạo WordPress Theme – Search form và Random Posts ( 15 )

DiVIVu : @ajimoto & tuyen: Làm thế này là được bạn ạ:

PHP Căn Bản – Bài 9 ( 40 )

pham duy : Vang ban angelthao_0984884679 da noi dung do chung t con chan chu gi nua ma khong giup

doan : ai muốn xem bằng file swf thì down KMP về mà dùng cái này còn hay hơn media của win nhiều

Lập trình web và sự Lười nhác ( 23 )

kien : Không còn gì để nói :-s

Tạo trang web đầu tiên ( 41 )

ho nga : ?

ho nga : huhu sao làm web mệt dzữ vậy a hai ui…?

position

Trong cách này chúng ta sẽ sử dụng absolute position để định vị thành phần và dùng margin

giá trị âm để bù lại khoảng mình đẩy xuống Cái hay trong cách này là tương thích với mọi

trình duyệt, không cần thêm một thẻ div nữa Nhưng mỗi khi trình duyệt bị thu nhỏ quá, nội

dung sẽ biến mất

Đây là cách có khi được sử dụng nhiều nhất bởi vì nó đơn giản nhất và tương thích với mọi

trình duyệt Nhưng nó chỉ có thể áp dụng với những thành phần chỉ có một dòng chữ và

thành phần chứa nó có độ cao cụ thể

K ết luận

Ở bài này tôi giới thiệu với bạn 3 cách để căn chỉnh theo chiều dọc một thành phần Cách

nào cũng có điểm mạnh và điểm yếu và bạn hãy tùy từng trường hợp mà áp dụng sao cho

hợp lý Nhưng trên thực tế một đoạn văn không nhất thiết phải nằm giữa một thẻ div mới

đẹp Chính vì thế trừ trường hợp bắt buộc, tránh sử dụng vertical-align cho nó đỡ rắc rối

2 #content {display: table - cell ; vertical - align: middle ;}

1 <div id= "container" >

3 <p> Lorem ipsum dolor sit amet.</p

4 </div>

5 </div>

1 #container {position: relative ;}

2 #content {

3 position:absolute ;

4 top:50% ; height: 200px ;

5 margin - top:- 100px ; /* giá trị âm bằng một nửa chiều cao */

6 }

2 Lorem ipsum dolor sit amet.

3 </div>

1 #content {

2 height: 200px ;

3 #content p {

4 line - height: 200px ;

5 }

Holiday Inn Hotels

Book Early to Save Up To 20% At Holiday Inn & Holiday Inn Express.

www.HolidayInn.com

Trang 3

« Tạo WordPress Theme – Custom Page Tạo WordPress Theme – Search form và Random Posts »

www.your-site.com

Your Ad Here! BIDVERTISER ADS

Nguyen Ngoc Long says:

February 12, 2010 at 11:19 pm

A ơi cho em hỏi về cách sử dụng các giá trị âm trong css Có một số giá trị CSS lại phải dùng giá trị âm Còn giá trị dương thì em đã hiểu

Ví dụ : margin-top:-100px; hay paddding-left : -50px v.v…

Anh có biết khi nào sử dụng giá trị âm và giá này có tác dụng gì trong việc thiết kế không anh

Reply

Linh says:

February 13, 2010 at 12:16 am

Anh có thể chỉ em cách show sản phẩm bằng css không.show 2 sản phẩm trên cùng

1 dòng giống như của thế giới di động vậy đó.cái này thì liên quan đến csdl là web động.em dùng code asp javacript,em thử nhiều cách mà vẫn chưa được mong anh giup đỡ !!!!!!!!

Reply

phạm đức sáng says:

March 5, 2010 at 7:08 am

chào anh Demon Warlock mấy tháng trước đây khi mới bắt đầu tìm hiểu về website ,thật tình cờ và thú vị khi đến với izweb izweb đã cho em những giải đáp về những tò

mò (về làm thế nào để có được trang web,domain là gì? hót là gì?…).

thật sự cám anh về những video clip chúc anh luôn có 1 sức khỏe tốt để có thể làm

ra thêm nhiêu clip khac nữa.

Reply

Nguyễn Ngọc Long says:

June 18, 2010 at 12:39 am

Đây là đoạn coding canh giữa theo chiều dọc nhưng không phục thuộc vào bất kỳ 1 trình duyệt nào kể cả IE Ở trang web http://ictexpress.com cũng sử dụng cái này bạn vào tham khảo nhé

any text any height any content, for example generated from DB everything is vertically centered

Reply

Nguyễn Ngọc Long says:

Reply

Trang 4

Leave a comment ( Chọn hình đại diện )

June 18, 2010 at 12:40 am

Đây là đoạn coding canh giữa theo chiều dọc nhưng không phục thuộc vào bất kỳ 1 trình duyệt nào kể cả IE Ở trang web http://ictexpress.com cũng sử dụng cái này bạn vào tham khảo nhé

http://forum.aspvn.net/tm.aspx?m=22467

Tên bạn

Email

Website

Comment

Luu ý khi post comment:

Không "bóc tem" topic

Dùng lời lẽ có văn hoá và lịch sự

Xem trang FAQs trước khi hỏi

Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>

Wrap code trong dấu `backtick` (dấu trên phím Tab)

Izwebz is solemnly hand coded and designed

from scratch by Demon Warlock It is also very

proud of being powered by WordPress, which

is an exceptionally well written and beautiful

Rules are not made to be broken at Izwebz Bạn không được tự ý copy và phát hành lại nội dung của izwebz nếu chưa được sự đồng ý của tôi.

Câu hỏi thường gặp Liên hệ

Tác giả Bản quyền

Trang web vẫn đang trong quá trình phát triển

về nội dung Do vậy nếu bạn có khả năng hãy đóng góp bài viết hoặc bạn có thể quảng cáo trang web đến những người mà bạn biết.

Submit

Trang 5

CMS Biết tôn trọng và cư xử hòa nhã với mọi

người Không "bóc tem" bài viết.

Izwebz được quyền xóa những comment nào không phù hợp với nội dung của trang web

Được vậy tôi sẽ rất biết ơn bạn.

Định dạng
Số trang	5
Dung lượng	274,09 KB