DIV 중심을 수평 및 수직으로 맞춥니다.
DIV를 수직 및 수평으로 중앙에 배치하는 방법이 있습니까? 중요한 것은 창이 내용보다 작을 때 내용이 잘리지 않는다는 것입니다. DIV는 배경색과 너비 및 높이를 가져야 합니다.
저는 항상 제공된 예와 같이 절대 위치와 음의 여백을 가진 div를 중심으로 했습니다.하지만 위에 있는 내용을 잘라낸다는 문제점이 있습니다.이 문제 없이 div.content를 집중시킬 수 있는 방법이 있습니까?
다음은 http://jsbin.com/iquviq/1/edit 의 예입니다.
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
<div class="background">
<div class="content"> some text </div>
</div>
제 질문은 "요소의 중심을 수평 및 수직으로 잡는 방법"과 중복되지 않습니다.1 - 전에 제 질문이 있었습니다.(날짜만 확인).2- 제 질문은 매우 명확하고 검은색으로 "창이 내용보다 작으면 내용이 잘리지 않습니다"라는 조건으로 질문합니다.
최신 브라우저용
당신이 그 사치를 누릴 때.플렉스박스도 있지만, 이 글을 쓸 당시에는 널리 지원되지 않았습니다.
HTML:
<div class="content">This works with any content</div>
CSS:
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
이전 브라우저 지원에 대해서는 이 스레드의 다른 부분을 참조하십시오.
많은 것을 시도한 후에 저는 효과적인 방법을 발견합니다.누구에게나 유용하다면 여기서 공유합니다.http://jsbin.com/iquviq/30/edit 에서 작동하는 것을 볼 수 있습니다.
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
여기 데모가 있습니다. http://www.w3.org/Style/Examples/007/center-example
방법(JSFidle 예제)
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div id="content">
Content goes here
</div>
다른 방법(JSFidle 예제)
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
브라우저 크기에 관계없이 합법적인 방법은 다음과 같습니다.
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
이 페이지에서 설명한 다양한 방법을 비교할 수 있습니다. http://blog.themeforest.net/tutorials/vertical-centering-with-css/
이들이 권장하는 방법은 중심을 잡을 수 없는 내용 앞에 빈 부동 요소를 추가한 후 삭제하는 것입니다.당신이 말한 단점은 없습니다.
저는 그것을 적용하기 위해 당신의 JSB를 포크했습니다: http://jsbin.com/iquviq/7/edit .
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
나는 CSS로 이것을 엄격히 할 수 있는 방법이 있다고 생각하지 않습니다.그 이유는 부모 요소가 자식 요소의 내용과 함께 확장되도록 강제하는 질문에 대한 "중요한" 한정자이기 때문입니다.
제 생각에 당신은 아이의 키를 찾고 조정하기 위해 자바스크립트의 일부를 사용해야 할 것입니다.
다음 HTML을 사용하여:
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
다음 CSS:
.parentElement{위치:계속;폭:960㎜;}.childElement {}위치:절대;상위: 50%;왼쪽: 50%; }
이 jQuery는 유용할 수 있습니다.
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
jQ는 영향을 받는 요소 아래의 본체 또는 내부의 헤드에 적절히 장착해야 합니다.$(document).ready(...)
.
언급URL : https://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically
'programing' 카테고리의 다른 글
Angular2: 하위 구성 요소 액세스 상위 클래스 변수/함수 (0) | 2023.08.15 |
---|---|
IE10/Edge에서 작동하지 않는 Cors와 함께 JSON Ajax 요청 게시 (0) | 2023.08.15 |
HTML5 입력 유형 범위 범위 값 표시 (0) | 2023.08.15 |
유형 오류: p.easing[this.easing]이(가) 함수가 아닙니다. (0) | 2023.08.15 |
Ajax 요청 완료 시 sweet alert를 닫는 방법 (0) | 2023.08.15 |