가운데정렬 (ie8, 파이어폭스)에서 서로 다르게 적용되는 이유??
누림
왕초보입니다. ^^!
큰박스 안에 여러개의 박스를 정렬해보다가 가운데 정렬이 (ie8, 파이어폭스) 에서 서로 다르게 적용이
되는것을 발견했어요.
편의상 css는 직접 마크업했습니다.
DTD 설정은 아래와 같구요.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtddiv style=width:800px; height:500px; background:black; /* wrap 박스 */
div style=width:100px; height:100px; background:red; float:left/div
div style=width:220px; height:160px; background:orange; float:right/div
div style=width:300px; height:120px; background:aqua; margin:0 auto;/div
div style=width:80px; height:100px; background:purple; margin:0 auto;/div
div style=width:110px; height:100px; background:yellow; margin:0 auto;/div
/div
결과
=====================================================================
ie8
파이어폭스float과 margin을 이용한 정렬방법에서 저런 결과가 나오는 이유가 무엇이며, 어떤것이 맞게 나온건가요?
그리고ie8에서,자주색(purple)의 사각형의 위치는 어느곳을 기준으로 정렬이 된것인지 이해가 안가네요. ㅜ.ㅜ;
아직 왕초보이다 보니 궁금한점이 많습니다.
많은 댓글 부탁합니다. 좋은 하루되세요!
-
푸르
플로트란 것이 바다위 나무판과 같은 것이죠 붕떠있는겁니다 그렇기때문에 웹표준을 준수하는 파폭에서는 아쿠아박스가 플로트된 오브젝트와 관계없이 화면의 중앙정렬이 되고 ie는 제대로 랜더링을 못하기 때문에 플로트된 박스 공간의 중앙에 정렬되는것이라 판단되네요
-
해뜰참
플롯 해제는 일부로 안한거구요^^; 해제 안할시 다음 블록이 어디를 기준으로 가운데 설정이 이루어지는지
시험해 보고싶어 한겁니다. 그리고, ie 버전은 8버전에서 한거구요.
다만, 제가 궁금한건 아쿠아색 블록이
(ie8) 에서는 왼쪽블록과 오른쪽블록의 사이의 중앙에 나타나고,
(파이어폭스)에서는 그것을 무시한 화면을 기준으로 중앙에 위치한다는것이 궁금하네요.. -
퍼리
지금 다시보니, 처음 화면은 Ctrl + B(자체브라우저)
내장브라우저로 보았을경우 화면이네요..
시스템 브라우저로 봤을경우엔 아래화면(파이어폭스)랑 동일하게 나오네요.. 님 말이 맞네요.
근데, 내컴퓨터 ie버전은 분명 8 버전인데.. 흠.. 이상하네요.. -
재마루
위와 같이 하셨다면 ie8이 아니라 ie7과 ie6 에서 중앙정렬이 약간틀어지고 그외에 브라우져에서는 정상적으로
나올것입니다.
float 해제를 안하셔서 나오는결과로 float 해제를하지면 위 그림들과 같지는 않지만 주황색 박스높이만큼 떨어진 위치에서 하늘색 보라색 노란색박스가 모든브라우져에서 중앙정렬이될것입니당.
위그림처럼 아예가운데 넣고 싶으시다면 마크업을 다른방식으로 하셔야합니당.