Vertical-align trong CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/vertical-align-trong-css/[8/10/2010 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. http://www.izwebz.com/css/vertical-align-trong-css/[8/10/2010 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. http://www.izwebz.com/css/vertical-align-trong-css/[8/10/2010 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 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 Vertical-align trong CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/vertical-align-trong-css/[8/10/2010 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 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 Vertical-align trong CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/vertical-align-trong-css/[8/10/2010 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. . 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. http://www.izwebz.com /css /vertical-align- trong- css/ [8/10/2010 3:04:24 PM] © 2008-2010 izwebz,. trong CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com /css /vertical-align- trong- css/ [8/10/2010 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. Vertical-align trong CSS | Học thiết kế web theo chuẩn. http://www.izwebz.com /css /vertical-align- trong- css/ [8/10/2010 3:04:24 PM] NAVIGATION Xuất bản SWF Player V1.1 Tìm hiểu về Z-index trong