Căn giữa một phần tử trong HTML sử dụng CSS3

Đối với những ai đã từng gặp phải tình huống muốn đưa một phần tử vào chính giữa của một phần tử khác hoặc là muốn căn giữa một phần tử theo chiều dọc thì chắc hẳn đã gặp phải một số khó khăn, nhất là khi độ cao của các phần tử này không được cố định trước. Nhưng nay, với sự bổ sung nhiều thuộc tính mới cho mô hình box trong CSS3 thì công việc này đã trở nên dễ dàng hơn bao giờ hết.

Trước tiên ta hãy xem ví dụ sử dụng thuộc tính box-align để căn giữa theo chiều dọc các thẻ con của một thẻ div. Trong trang html của mình, chúng ta có 2 thẻ div được lồng với nhau, công việc của chúng ta là cho thẻ div bên trong được hiển thị ở chính giữa thẻ div bên ngoài nó theo chiều dọc.

<html>
<head>
</head>
<body>
<div class="outer">
<div class="inner">Center this content</div>
</div>
</body>
</html>

Ta tạo một khối stylesheet như sau để có thể quan sát dễ dàng vị trí của 2 thẻ div:

<style type=text/css>

.outer {

width【 業務用 】トップハンドル2ヶ付2段 2T-4-2-B-9-L婚約指輪 0.34ct【10大特典あり】『エンゲージリング ダイヤモンドリング K18WG』|プラチナリング|サイズ直し無料|結婚記念日|彼女|誕生日プレゼント|女性|刻印無料:350px除菌トイレクリーナー500ml 【(24本×10ケース)合計240本セット】 30-367NISSAN-HELLO 流し台 ミニキッチン 間口900mm 奥行500mm 高さ1900mm 2ホール2バルブ混合水栓 100Vプレートヒーターコンロ MW-90-H1 ニッサンハロー;

height水素風呂マルーン☆3年保証で安心!話題の「水素」を短時間で全身から取り入れる!充電式で経済的なマルチポット型水素発生器フレリック シリアルボックス 2連 LTO-100E 385×295×H400mm:100px[送料無料] ムラテックKDS デジボーマークII DM-50(5m6段) 重さ1.95kg 収納サイズ1050mm【内径測定/天井高測定/対角測定/窓枠うちのり/基礎工事】[送料無料]ペアリング ダイヤ ダイヤモンド ホワイトゴールドk18結婚指輪 マリッジリング k18wg結婚記念リング 2本セット 甲丸18k 18金【楽ギフ_包装】0824カード分割【コンビニ受取対;

borderアイリスオーヤマエアコン 「スタンダードシリーズ」(冷房時6〜9畳/暖房時5〜6畳) IRR-2217C-Wペア【あす楽対応】マークジェイコブス 37mmと29mmMJ1532 and MJ1537 ペアウォッチ:1px solid black☆ポイント20倍☆箱買い特価☆業務用?イベント?販促ツールに?チェルベ 大判バスマット[パープル] 090938PU【16個セット】★08/04 21:00?10/02 09:59までポイント20倍!STAR WARS 12インチフィギュア アナキン・スカイウォーカー エピソード3バージョン トミーダイレクト;

}

.inner{

widthhttp://www.lifeinsurancequotesin.com【店内全品ポイント10倍!開催中!】ミセルフラパネルビッグワイド フル両面 お客様駐車場 / 関係者以外の駐車禁止 駐車場 置き看板 スタンド看板 /OT-558-227-FW303:150px小型電気温水器(センサー水栓つき) 【239-001-2】【RCP】【配管資材・水道材料】カクダイ【セルフリノベーション】間仕切 アコーデオンカーテン ドア クールモダン(クリアーNo.6108/クリアーオレンジNo.6109);

height着抜1色プリント(1ロット360枚) RTK376Georg Jensen ( ジョージ ジェンセン )「 KOPPEL WATCH(コッペル ウォッチ )」41mm/ホワイト/ブラウンカーフレザー【P01】【flash】:50pxヨド物置LMD−1811「あす楽対応商品」「二重形成化粧品」ローヤル化研 ローヤルプチアイムS II (Royal Petit Eyem S II) 4mL スティック付き x 24個セット+さらに選べるおまけ付き【smtb;

border:1px solid black;

}

</style> 

Bây giờ ta thêm thuộc tính box-align cho thẻ div ở ngoà:

<style type=text/css>

.outer {

width:350px;

height:100px;

border:1px solid black;

/* Dành cho Firefox */

display:-moz-box;

-moz-box-align:center;

/* Dành cho Safari and Chrome */

display:-webkit-box;

-webkit-box-align:center;

/* W3C */

display:box;

box-align:center;

}

.inner{

width:150px;

height:50px;

border:1px solid black;

}

</style>

Và đây là kết quả:

Ở đoạn code trên ta có sử dụng 2 thuộc tính đó là: displaybox-align. Thuộc tính display đã có ở CSS2 nhưng sang CSS3 thì nó được bổ sung thêm giá trị mới đó là box được dùng để chuyển thẻ outer thành dạng Flexible Box Model (tham khảo thêm tại đây). Thuộc tính box-align có thể nhận vào các giá trị start, end, center, baseline, stretch, trong đó giá trị centerđược dùng để căn giữa các thẻ con theo chiều dọc.

Bây giờ chúng ta sẽ thực hiện việc căn giữa thẻ div con theo chiều ngang bằng cách sử dụng thuộc tính box-pack. Thuộc tính box-pack có thể nhận vào các giá trị sau: start, end, center¸ justifytrong đó giá trị center được dùng để căn giữa thẻ con theo chiều ngang.

<style type=”text/css“>

.outer {

width:350px;

height:100px;

border:1px solid black;

/* Dành cho Firefox */

display:-moz-box;

-moz-box-align:center;

-moz-box-pack:center;

/* Dành cho Safari and Chrome */

display:-webkit-box;

-webkit-box-align:center;

-webkit-box-pack:center;

/* W3C */

display:box;

box-align:center;

box-pack:center; }

.inner{

width:150px;

height:50px;

border:1px solid black;

}

</style>

Và kết quả đạt được:

Lưu ý: Thuộc tính box-pack và box-align vẫn chưa được hỗ trợ hầu hết bởi các trình duyệt, Firefox thì hỗ trợ các thuộc tính để thay thế đó là –moz-box-pack và –moz-box-align. Safari và Chrome thì cung cấp –webkit-box-pack và -webkit-box-align. Với IE thì đành phải chờ các phiên bản tiếp theo vậy.

Tham khảo:

http://www.w3schools.com/cssref/css3_pr_box-align.asp

https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Có sử dụng ảnh của: http://roqeemdesign.wordpress.com/

One comment on “Căn giữa một phần tử trong HTML sử dụng CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *