10/10/2018, 11:11

CSS: Margin:auto or div align=center vẫn k canh giữa trong IE, help me.

Mình có đoạn code đơn giản sau:
<style>
@charset "utf-8";
*{
margin:0px;
}

#login{
width:400px;
margin:auto;
}

label{
width:100px;
float:left;
font-weight:900;
}

legend{
color:#FF0000;
font-size:25px;
}
</style>
<div id="login">
<form method="post" action=""><fieldset><legend>Login to manage</legend>
<label>Email</label><input type="text" name="email" /><br />
<label>Password</label><input type="password" name="pass" /><br />
<label>&nbsp;</label><input type="submit" name="ok" value="Sigin" />
</fieldset></form>
</div>
chạy trong FF và Chrome thì khung login canh giữa bình thường, nhưng chạy trong IE thì k canh giữa dc, mong dc giúp đỡ vấn đề này.
redhill viết 13:20 ngày 10/10/2018
Bạn có thể đặt nó trong thẻ <div align="center"> và thêm css ở #login : text-align: left để text trong form trở về canh trái. Thằng IE nó hơi củ chuối nên phải vậy cho nhanh.

Nó như thế này:

<style>
@charset "utf-8";
*{
margin:0px;
}

#login{
width:400px;
margin:auto;
text-align: left;
}

label{
width:100px;
float:left;
font-weight:900;
}

legend{
color:#FF0000;
font-size:25px;
}
</style>
<div align="center">
<div id="login">
<form method="post" action=""><fieldset><legend>Login to manage</legend>
<label>Email</label><input type="text" name="email" /><br />
<label>Password</label><input type="password" name="pass" /><br />
<label>&nbsp;</label><input type="submit" name="ok" value="Sigin" />
</fieldset></form>
</div>
</div>
php_code viết 13:11 ngày 10/10/2018
thanks pro, đã giải quyết dc vấn đề.
ngoc_viet08 viết 13:15 ngày 10/10/2018
width:960px;
margin:0 auto;
zmt264 viết 13:27 ngày 10/10/2018
Được gửi bởi php_code
thanks pro, đã giải quyết dc vấn đề.
div align="center" là gắn presentation vào HTML, ko nên dùng, nên tách ra cho CSS giải quyết; HTML chỉ nên làm structure cho data thôi.

http://www.youtube.com/watch?v=-l4dT3QLGeU
php_code viết 13:15 ngày 10/10/2018
Được gửi bởi ngoc_viet08
width:960px;
margin:0 auto;
Code của bạn thêm vào chỗ nào? Mình thử gắn vào
#login{
width:400px;
margin: 0 auto;
}
nhưng vẫn k dc


Được gửi bởi zmt264
div align="center" là gắn presentation vào HTML, ko nên dùng, nên tách ra cho CSS giải quyết; HTML chỉ nên làm structure cho data thôi.

http://www.youtube.com/watch?v=-l4dT3QLGeU
E dùng cách của a Tuấn vẫn k dc, nếu demo theo a = 1 hình CN 400x500 thì ok, nhưng gắn vào code của e vẫn k canh center trong IE
#login{
width:400px;
margin-left:auto;
margin-right:auto;
}
zmt264 viết 13:13 ngày 10/10/2018
Được gửi bởi php_code
E dùng cách của a Tuấn vẫn k dc, nếu demo theo a = 1 hình CN 400x500 thì ok, nhưng gắn vào code của e vẫn k canh center trong IE
a = 1 là sao nhỉ?

http://jsbin.com/elaxi5 (cách của bạn): FF ok, IE 6 NOT ok
http://jsbin.com/elaxi5/2 (cách của tôi): FF ok, IE 6 CŨNG ok

không hiểu code do bạn sinh ra thế nào? có thiếu thẻ gì ko mà ko được, bạn thử viewsource HTML của bạn rồi post hết jsbin.com xem nào
redhill viết 13:14 ngày 10/10/2018
Thật ra cách của bạn zmt264 cũng tương tự cách của mình làm, chỉ khác 1 điều là thay vì để align="center" thì đặt text-align:center trong css. Mình thì ko đi sâu nhiều về css nên ko rõ làm như thế nào thì tốt hơn, nhưng so sánh về kết quả thì cả 2 như nhau.

div align="center" là gắn presentation vào HTML, ko nên dùng, nên tách ra cho CSS giải quyết; HTML chỉ nên làm structure cho data thôi.
Vấn đề này mình sẽ tìm hiểu thêm. Thanks!
php_code viết 13:12 ngày 10/10/2018
Được gửi bởi zmt264
a = 1 là sao nhỉ?

http://jsbin.com/elaxi5 (cách của bạn): FF ok, IE 6 NOT ok
http://jsbin.com/elaxi5/2 (cách của tôi): FF ok, IE 6 CŨNG ok

không hiểu code do bạn sinh ra thế nào? có thiếu thẻ gì ko mà ko được, bạn thử viewsource HTML của bạn rồi post hết jsbin.com xem nào
a = 1 (....làm theo cách của anh(a) bằng (=) một(1)) HCN.....

-Nếu thêm body{text-align:center) vào rồi thêm text-align:left trong #login thì ok. Nhưng vấn đề là thẻ body a đã gắn thuộc tính center vào nó rồi, sau này mình còn định dạng thêm bất kì cái gì cũng đều phải text-align:left, vậy có bất tiện k ?

-Xem qua video trên của a có margin-left:auto, margin-right:auto, sao e làm theo cách đó k dc?


P/s: anh zmt và các cao thủ có ghé qua xem dùm mìh cái này với, http://ddth.com/showthread.php?p=2674387#post2674387
nguoimoi viết 13:16 ngày 10/10/2018
Cái này nhiều người mắc phải lắm, giải pháp tôi hay dùng là thay thế một đoạn code trên đầu file html

Nguyên gốc thường là thế này:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Thay thế bằng đoạn này:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Chắc sẽ thành công, thử link này xem: http://jsbin.com/uferi5

Hãy phản hồi để ai mắc phải thì biết cách khắc phục.
Bài liên quan
0