Hỏi 1 chút về căn lề giữa với CSS

English | Vietnamese

Rules

Main Forum

Portal

Member Listing

Statistics

Search

Reading Room
[Register]

Login [ | https ]

Forum Index

Thảo luận hệ điều hành Windows

Hỏi 1 chút về căn lề giữa với CSS

[Question] Hỏi 1 chút về căn lề giữa với CSS	19/11/2007 18:11:32 (+0700) \| #1 \| 98608

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Chào mọi người.

Mình thiết kế web theo CSS, đang gặp phải 1 vấn đề nhỏ thế này: làm thế nào để đặt nội dung của 1 thẻ <div></div> nằm căn giữa màn hình (chỉ theo chiều ngang giống <center></center>, ko có chiều dọc), yêu cầu là bên trong thẻ <div></div> đó có thể có bất cứ thứ gì, kể cả table, header, link, list, ...

Trước mình thiết kế web có 3 cột thì dùng thuộc tính float và margin kiểu như sau để cho cột thứ 2 nằm chính giữa
Code:

#cot1, #cot2, #cot3 {
float: left;
position: relative;
}
#cot1, #cot3 {
width: 100px;
}
#cot2 {
width: 400px;
margin: 0 auto 0 auto;
}

Đối với 3 cột thì nó chạy đúng, nhưng khi mình thử với web chỉ có 1 cột thì ở trình duyệt IE bị lỗi, còn Firefox thì được.

Rất mong mọi người giúp đỡ, xin cám ơn rất nhiều.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	20/11/2007 18:20:22 (+0700) \| #2 \| 98848

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Mình mới tìm được 1 cách, áp dụng với thẻ div đã biết sẵn độ rộng width, ai có cách khác xin chỉ giúp:

Code:

width: 400px;
left: 50%; // đặt mặc định lề trái tính từ giữa màn hình
margin-left: -200px; // giá trị âm bằng 1/2 độ rộng, do lề tính từ chính giữa màn hình nên đối tượng sẽ được căn vào giữa
position: absolute;

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	22/11/2007 09:37:31 (+0700) \| #3 \| 99239

ngonchan
Elite Member

Joined: 23/02/2004 12:03:51
Messages: 136
Offline

learn2hack wrote:

Mình mới tìm được 1 cách, áp dụng với thẻ div đã biết sẵn độ rộng width, ai có cách khác xin chỉ giúp:

Code:
width: 400px;
left: 50%; // đặt mặc định lề trái tính từ giữa màn hình
margin-left: -200px; // giá trị âm bằng 1/2 độ rộng, do lề tính từ chính giữa màn hình nên đối tượng sẽ được căn vào giữa
position: absolute;

Chào bác, bác thêm vào Code:

margin: 0 auto;

nhé. Khỏi cần cái margin-left cũng ok như thường thôi smilie

Bác thử xem.

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	22/11/2007 19:29:01 (+0700) \| #4 \| 99326

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Ko được ngonchan à, tớ thử đoạn code sau thì thấy bị lệch:
Code:

width: 400px;
left: 50%; // đặt mặc định lề trái tính từ giữa màn hình
margin: 0 auto;
position: absolute;

Đoạn mã margin: 0 auto chỉ là căn lề trái là 0, lề phải tự động, khi đó nếu đặt thuộc tính left: 50% thì lề sẽ được tính từ giữa, và toàn bộ nội dung của thẻ div bị nằm ở nửa bên phải; còn nếu ko có thuộc tính left: 50% thì toàn bộ nội dung nằm lệch về nửa bên trái.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	23/11/2007 01:12:13 (+0700) \| #5 \| 99383

ngonchan
Elite Member

Joined: 23/02/2004 12:03:51
Messages: 136
Offline

Bác thử cái này xem smilie

Code:

<html>
 <head>
 <style>
body{
 text-align:center;
}

 #wrapper{
 width:770px;
 margin: 0 auto; 
 }

 #left{
 width:30%;
 background: pink;
 float: left;
 }

 #right{
 width:70%;
 background: green;
 float: right;
 }

#footer{
 clear: both;
}
 </style>
 </head>
 <body>
 <div id="wrapper">
 <div id="left">Navigator</div>
 <div id="right">Content page</div>
 <div id="footer">© 2007</div>
 </div>
 </body>
</html>

Đã test trên IE và FF, smilie

hiện ok rồi smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	24/11/2007 12:56:08 (+0700) \| #6 \| 99652

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Ấn tượng đấy ngonchan smilie

. Có lẽ tớ phải ngẫm lại 1 chút. Bữa trước tớ thử với table đặt trong thẻ div như vậy mà hiển thị bị lệch. Thanks cậu nhiều.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	24/11/2007 18:11:10 (+0700) \| #7 \| 99680

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Tớ thử và thấy thuộc tính text-align: center; của thẻ body cũng nắm 1 vai trò quyết định. Cách này rất tuyệt, mã lệnh gọn nhẹ. Cám ơn cậu lần nữa smilie

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	27/11/2007 03:34:02 (+0700) \| #8 \| 100326

ngonchan
Elite Member

Joined: 23/02/2004 12:03:51
Messages: 136
Offline

learn2hack wrote:

Cám ơn cậu lần nữa .

Không có gì smilie

tớ cũng đang làm web tableless, cũng còn nhiều chỗ chưa làm được lắm. Nếu l2h có hứng thú, muốn tìm người để học chung cho dzui thì hú một tiếng, có 2 ngươì nghiên cứu có hứng thú hơn là một người đó.

À, l2h (nick dzài thòn smilie

) có thể chèn hình giống như slide của Photoshop mà chỉ dùng div, không dùng table được chưa ? ngón chân đang xem mà làm chưa được smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	27/11/2007 12:45:37 (+0700) \| #9 \| 100483

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Ừ, tớ đang tìm hiểu về cái này để chỉnh sửa giao diện chút xíu cho gọn nhẹ hơn mà vẫn hiển thị tốt. Học chung thì hơi khó nhưng mà trao đổi thì tớ rất thích, có vài cái nhiều khi vướng mắc có người trao đổi thì vẫn hay hơn là tự nghịch 1 mình smilie

.
Cái slide để tớ về thử nghiên cứu xem nào, thú vị đây smilie

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	18/12/2007 14:58:23 (+0700) \| #10 \| 104548

ducmanh
HVA Friend

Joined: 12/09/2004 18:07:25
Messages: 143
Location: Hà Nội
Offline

Hix, thuộc tính text-align: center mà để thế thì tất cả nội dung sẽ ở giữa mất.

Nếu cần ở giữa gì để ở cột 2 thôi. Nếu bạn muốn cả khối đó ở giữa thì dùng float: center. Còn muốn nội dung trong khối nào đó căn giữa thì text-align: center hoặc justify nếu căn lề trái phải thẳng tưng smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	19/12/2007 13:02:32 (+0700) \| #11 \| 104723

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Thực ra lúc nói thuộc tính text-align: center có vai trò là do tớ thử với table mà không để width=100% nên có cảm giác bị lệch, chứ thực ra không cần, chỉ cần 2 thuộc tính width, và margin: 0 auto là đủ rồi.
Dùng float có vẻ không ổn lắm với website 1 cột, vì thực ra chuẩn CSS không có thuộc tính float: center (chỉ có left, right và none thôi).

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	22/12/2007 09:47:42 (+0700) \| #12 \| 105287

ngonchan
Elite Member

Joined: 23/02/2004 12:03:51
Messages: 136
Offline

learn2hack wrote:

chuẩn CSS không có thuộc tính float: center (chỉ có left, right và none thôi).

Cái này hoàn toàn chính xác smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	31/01/2008 14:41:16 (+0700) \| #13 \| 113113

SonNguyen_sn
Member

Joined: 16/04/2007 20:10:44
Messages: 53
Offline

Hay hay!
E cũng đang chuyên dụng về cái thằng cSS này.

Có gì cùng trao đổi với các bác cho vui. Dạo này, có mấy khi dùng table nữa đâu. Táng thẻ div vào cho sướng.

Nhưng có nhiều cái, không hiểu sao IE nhận thì đẹp còn FF thì méo xẹo và ngược lại.

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	01/02/2008 05:19:53 (+0700) \| #14 \| 113193

cvhainb
Member

Joined: 04/01/2007 14:32:38
Messages: 251
Offline

SonNguyen_sn wrote:

Hay hay!
E cũng đang chuyên dụng về cái thằng cSS này.

Có gì cùng trao đổi với các bác cho vui. Dạo này, có mấy khi dùng table nữa đâu. Táng thẻ div vào cho sướng.

Nhưng có nhiều cái, không hiểu sao IE nhận thì đẹp còn FF thì méo xẹo và ngược lại.

!important <- phân biệt giữa IE và FF.Bác muốn biết chi tiết thì có lẽ lên mạng search smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	01/02/2008 09:30:24 (+0700) \| #15 \| 113225

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Lâu rồi quay lại topic này, hôm trước đọc 1 bài báo nào đó trên mạng cũng nói qua cách căn lề giữa dùng CSS, ở đó trình bày cách của ngonchan, nhưng viết chi tiết hơn, code mà họ dùng là thế này"
Code:

body {
    text-align: center;
}
wrap {
    margin: 0 auto;
    text-align: left
}

Họ gán lề cho body rồi gán lại cho wrap để đảm bảo không bị lệch. Làm thế này an toàn hơn và tốt hơn smilie

.

Ngoài ra còn 1 cách nữa tớ mới đọc được trong sách: đó là tạo 1 phần tử có border trái và phải bằng nhau smilie

:
Code:

border-left: 100px solid white;
border-right: 100px solid white;

Cách này độc đáo ở chỗ nếu làm web có 3 cột chẳng hạn, thì cho phần boder này to ra, phủ vừa cả 2 cột 2 bên smilie

. Thế là phần ở giữa tha hồ co dãn thoải mái mà vẫn nằm chính giữa.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	02/02/2008 10:54:57 (+0700) \| #16 \| 113333

SonNguyen_sn
Member

Joined: 16/04/2007 20:10:44
Messages: 53
Offline

learn2hack wrote:

Lâu rồi quay lại topic này, hôm trước đọc 1 bài báo nào đó trên mạng cũng nói qua cách căn lề giữa
Ngoài ra còn 1 cách nữa tớ mới đọc được trong sách: đó là tạo 1 phần tử có border trái và phải bằng nhau :
Code:
border-left: 100px solid white;
border-right: 100px solid white;
Cách này độc đáo ở chỗ nếu làm web có 3 cột chẳng hạn, thì cho phần boder này to ra, phủ vừa cả 2 cột 2 bên . Thế là phần ở giữa tha hồ co dãn thoải mái mà vẫn nằm chính giữa.

He he!

Cái này là mẹo rồi. Nếu thằng ku nào dùng backgrond-color không phải màu trắng thì ......

Cái này là hay đấy smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	02/02/2008 14:38:59 (+0700) \| #17 \| 113347

canh_nguyen
Elite Member

Joined: 23/08/2004 18:55:09
Messages: 775
Location: Broken dream
Offline

SonNguyen_sn wrote:

He he!

Cái này là mẹo rồi. Nếu thằng ku nào dùng backgrond-color không phải màu trắng thì ......

Cái này là hay đấy

Thì transparent smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	08/02/2008 12:25:54 (+0700) \| #18 \| 113894

woodyboy
Member

Joined: 13/05/2007 15:55:01
Messages: 18
Offline

Trời ơi các bác lằng nhằng quá. Em có cách này nhé, các bác cài dreamwaver8 vào máy, chạy graphic mà thiết kế sau đó chuyen qua code hay slip de xem code, sẽ học đwowcj nhiều lám đấy. smilie

[Question] Re: Hỏi 1 chút về căn lề giữa với CSS	09/02/2008 10:27:38 (+0700) \| #19 \| 113964

learn2hack
Elite Member

Joined: 29/06/2006 16:32:37
Messages: 825
Offline

Tớ không dùng thạo Dreamwaver nên không rõ lắm. Bạn có thể chỉ vài cách mà bạn làm với Dreamwaver và những gì bạn học hỏi được ở đó lên đây được không? Cám ơn rất nhiều.

Blog: http://hontap.blogspot.com
Tải phần mềm miễn phí: http://www.taiphanmem.org

Go to:

Users currently in here
1 Anonymous