728x90
반응형
질문 : CSS를 사용하는 모든 브라우저에 대해 "div"요소를 세로 중앙에 어떻게 배치 할 수 있습니까?
CSS div 세로로 가운데에 배치하고 싶습니다. 나는 테이블이나 자바 스크립트를 원하지 않고 순수한 CSS만을 원합니다. 몇 가지 해결책을 찾았지만 모두 Internet Explorer 6 지원이 누락되었습니다.
<body>
<div>Div to be aligned vertically</div>
</body>Internet Explorer 6을 포함한 모든 주요 브라우저에서 div 세로로 중앙에 배치하려면 어떻게해야합니까?
답변
아래는 고정 너비의 유연한 높이 콘텐츠 상자를 수직 및 수평 중앙에 구축 할 수있는 최고의 만능 솔루션입니다. Firefox, Opera, Chrome 및 Safari의 최신 버전에서 테스트되고 작동했습니다.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/* Whatever width you want */
}<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>유연성을 테스트하기 위해 몇 가지 동적 콘텐츠를 만들었으며 누구든지 문제가 있는지 알고 싶습니다. 라이트 박스, 팝업 등 중앙 오버레이에서도 잘 작동합니다.
출처 : https://stackoverflow.com/questions/396145/how-can-i-vertically-center-a-div-element-for-all-browsers-using-css
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| CSS를 사용하여 목록 항목에서 줄 바꿈을 방지하는 방법 (0) | 2021.07.13 |
|---|---|
| CSS를 사용하는 테이블 행 색상 변경 (0) | 2021.07.13 |
| 'div'컨테이너에 맞게 이미지 크기를 자동으로 조정하는 방법 (0) | 2021.07.13 |
| div 내부에서 이미지를 세로로 정렬하는 방법 (0) | 2021.07.12 |
| 배경에서 CSS 만 사용해서 이미지 늘리기 및 크기 조정 (0) | 2021.07.12 |