Mozilla 한국 커뮤니티

너무 초보적인 질문이라 쑥쓰럽지만; 아무리 들여다봐도 모르겠어요.

<div style="width:100%;text-align:center"><div style="width:270px;border:solid 1 red">CENTER</div></div>

브라우저 창 크기와 상관없이 가운데에 테두리가 빨간 상자가 나타날 거라고 생각했는데 익스플로러에서는 그렇게 나타나는데 파이어폭스에서는 글자만 한쪽에 치우쳐서 보입니다. 그런데 왜 그런지 모르겠네요;

text-align은 inline 엘리먼트에 적용이 되는데 div는 block 엘리먼트라서, width값을 주어 너비를 줄여도 가운데로 오지 않습니다.

Block 엘리먼트를 가운데 오게 하려는 의도라면, 두번째 div에 margin-left: auto; margin-right: auto;를 줘보세요.

ps. border 굵기에 단위가 빠졌어요.

inline 엘리먼트와 block 엘리먼트를 구분해야 하는군요. 늘 헷갈리던 문제인데 고맙습니다.