기타 계열 브라우저 style Text-align:center; 안먹는경우.
익스의 경우
<div style="text-align:center;">zzz</div>
를 할경우 자동으로 zzz가 센터로 가게 된다.
하지만 IE를 제외한 브라우저에서는 작동이 되지 않는다.
이에 대처 방법으로는
<div style="text-align:center; margin:auto;">zzz</div>
스타일로 마진을 자동 계산하게 하면된다.
ps. 작업중에 크롬에서 가운데 정렬이 안되서 이것저것 하다가 마진을 오토로 주니까 정상작동되서 팁으로 올립니다.
<div style="text-align:center;">zzz</div>
를 할경우 자동으로 zzz가 센터로 가게 된다.
하지만 IE를 제외한 브라우저에서는 작동이 되지 않는다.
이에 대처 방법으로는
<div style="text-align:center; margin:auto;">zzz</div>
스타일로 마진을 자동 계산하게 하면된다.
ps. 작업중에 크롬에서 가운데 정렬이 안되서 이것저것 하다가 마진을 오토로 주니까 정상작동되서 팁으로 올립니다.
댓글 6개
DreamT
14년 전
흠.. margin:auto; 는 div 자체를 가운데정렬시킬때 쓰는법인데 익스플로러에서 그냥은 안먹히구요. 익스8에서 dtd 선언하구 하면 먹혀요.
그리고 text-align:center은 안에 들은 내용만 가운데 정렬시켜주는것이거든요.
dtd 선언이없다면 익스에서 div에 width 값을 안주면 100%로 인식하기때문에 zzz가 익스에서는 가운데에 나와보이는거구요. 다른 브라우져에서는 zzz 크기만큼만 div 넓이가 결정되기때문에 그렇게 보이는겁니다 ㅎ
그리고 text-align:center은 안에 들은 내용만 가운데 정렬시켜주는것이거든요.
dtd 선언이없다면 익스에서 div에 width 값을 안주면 100%로 인식하기때문에 zzz가 익스에서는 가운데에 나와보이는거구요. 다른 브라우져에서는 zzz 크기만큼만 div 넓이가 결정되기때문에 그렇게 보이는겁니다 ㅎ
Terrorboys
14년 전
네. dtd를 선언 하지 않는다는 전제하에 사용가능한 꼼수 입니다. ^^
DreamT
14년 전
아 이때 아침이라 해까닥했었나.. 제가 실수한거같아요 ㅎㅎ 타브라우져에서도 100%로 인식하는데...;; ㅠㅠ 먼가 잘못된 답변을달았네요 ㅠ
14년 전
<div style="text-align:center;">zzz</div>
<div style="text-align:center; margin:0 auto;">zzz</div>
ㅎㅎ 상하는 0 으로.. 잡아줘야.. 정확히.. 잡히구요..;;ㅎ
<div style="text-align:center; margin:auto;">zzz</div>
이거할려면
<div style="text-align:center; vertical-align:baseline; margin:auto;">zzz</div>
정중앙...;;ㅎ
근데.. 사이즈적어줘야 좋아요 > < ㅎ
<div style="text-align:center; margin:0 auto;">zzz</div>
ㅎㅎ 상하는 0 으로.. 잡아줘야.. 정확히.. 잡히구요..;;ㅎ
<div style="text-align:center; margin:auto;">zzz</div>
이거할려면
<div style="text-align:center; vertical-align:baseline; margin:auto;">zzz</div>
정중앙...;;ㅎ
근데.. 사이즈적어줘야 좋아요 > < ㅎ
Terrorboys
14년 전
흠... IE의 경우 값이 없으면 자동으로 0으로 잡아주니까....
그것 까지는 생각 못했네요.
baseline
이건 전혀 새로 보는거네요.
vertical-align:top; 와 같은기능을 하는데..
스타일 컨텐츠 안의 최대 크기를 기준으로 전체는 상단 컨텐츠안의 크기에서 하단에 정렬하는군요.
좋은 정보 감사합니다.
그것 까지는 생각 못했네요.
baseline
이건 전혀 새로 보는거네요.
vertical-align:top; 와 같은기능을 하는데..
스타일 컨텐츠 안의 최대 크기를 기준으로 전체는 상단 컨텐츠안의 크기에서 하단에 정렬하는군요.
좋은 정보 감사합니다.
14년 전
헤헤..^^ㅋㅋ
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3269 |
 익명닉네임 |
10년 전 | 6656 | |
| 3268 | 10년 전 | 7177 | ||
| 3267 |
또치하우스
|
11년 전 | 4997 | |
| 3266 |
네이비칼라
|
11년 전 | 5030 | |
| 3265 | 11년 전 | 5149 | ||
| 3264 | 11년 전 | 7038 | ||
| 3263 |
 지민이생각 |
11년 전 | 7202 | |
| 3262 |
 엘남매아빠 |
11년 전 | 6641 | |
| 3261 | 11년 전 | 5551 | ||
| 3260 | 11년 전 | 7403 | ||
| 3259 | 11년 전 | 6702 | ||
| 3258 | 11년 전 | 5510 | ||
| 3257 | 11년 전 | 10475 | ||
| 3256 | 11년 전 | 3820 | ||
| 3255 |
언제나해피
|
11년 전 | 7398 | |
| 3254 | 11년 전 | 4980 | ||
| 3253 | 11년 전 | 13089 | ||
| 3252 | 11년 전 | 4747 | ||
| 3251 |
노피노키오
|
11년 전 | 6822 | |
| 3250 |
엘남매아빠 |
11년 전 | 5810 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기