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.
3:04:24 PM]
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
Random News Popular
EMAIL ARTICLES
Vertical-align trong CSS
January 10, 2010 5 comments
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.
Cách 1: Biến <div> thành table cell
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
HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN
Vertical-align trong CSS | Học thiết kế web theo chuẩn.
3:04:24 PM]
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
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
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 ạ:
<script type="text/javascript&
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…?
Cách 2: Sử dụng margin và absolute
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.
Cách 3: sử dụng line-height
Đâ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">
2 <div id="content">
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 }
1 <div id="content">
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

Vertical-align trong CSS | Học thiết kế web theo chuẩn.
3:04:24 PM]
5 Comments
( Comment bài này )
« Tạo WordPress Theme – Custom Page Tạo WordPress Theme – Search form và Random Posts »
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
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 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
Vertical-align trong CSS | Học thiết kế web theo chuẩn.
3:04:24 PM]
Leave a comment
( Chọn hình đại diện )
Chọn kiểu gõ: Tự động TELEX VNI Tắt
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 cũng sử dụng cái này bạn
vào tham khảo nhé
/>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
Vertical-align trong CSS | Học thiết kế web theo chuẩn.
3:04:24 PM]
© 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock
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.