div의 위치가 relative이고 CSS를 사용하여 가로 및 세로로 정렬하는 가장 쉬운 방법은 무엇입니까? div의 너비와 높이는 알 수 없습니다. 즉, 모든 div 크기와 모든 주요 브라우저에서 작동해야합니다. 센터 정렬을 의미합니다. 내가 here을했던 것처럼CSS를 사용하여 교차 브라우저 div 중심 맞춤
margin-left: auto;
margin-right: auto;
:
나는 사용하여 수평 정렬을 만들 생각했다.수평 정렬에 적합한 크로스 브라우저 솔루션입니까?
어떻게 수직 정렬을 수행 할 수 있습니까?
가로 가운데 맞춤은 요소의 width이 알려진 경우에만 가능합니다. 그렇지 않으면 브라우저가 시작 및 끝 지점을 파악할 수 없습니다.
#content {
width: 300px;
margin: 0 auto;
}
완벽하게 크로스 브라우저 호환입니다.
수직 중심 맞춤은 요소가 절대적으로 배치되어 있고 height으로 알려진 경우에만 가능합니다. 그러나 절대 위치 지정은 margin: 0 auto;을 깨뜨려서 다르게 접근해야합니다. 당신은 각각의 width 및 height의 부정적인 반에 그 top 및 left50%하고 margin-top 및 margin-left를 설정해야합니다. 말했다
<!doctype html>
<html lang="en">
<head>
<title>SO question 2935404</title>
</head>
<style>
#content {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px; /* Negative half of width. */
margin-top: -100px; /* Negative half of height. */
border: 1px solid #000;
}
</style>
<body>
<div id="content">
content
</div>
</body>
</html>
는 여기 copy'n'paste'n'runnable 예입니다.
너비와 높이가 미리 알려지지 않은 경우에는 margin-left 및 margin-top 값을 설정하고 클라이언트가 페이지로드 중에 div가 빠르게 이동하는 것을 볼 수 있도록 Javascript/jQuery를 가져와야합니다. "wtf"가 발생할 수 있습니다. 경험.
표준 모드에서 IE를 실행해야합니다 (단점 모드에서는 ' div를 수평 방향으로 가운데 정렬하려면 부모 요소에'text-align : center'를 사용해야합니다). –
Quirks 모드는 현대 웹 페이지에서 결코 선택 사항이 아니므로 고려 가치가 없습니다. – Rob
@Rob : 이것에 관해 불꽃 전쟁을 시작하기는 싫지만 (아무도 Quirks 모드로 죽는다), 웹 애플리케이션에서 Quirks 모드를 사용하여 [border-box box model] (http : // www. .quirksmode.org/css/box.html) IE에서. –
"수직 중심 맞춤은 요소가 절대적으로 배치되고 높이가 알려진 경우에만 가능합니다." -이 문장은 정확하지 않습니다.
display:inline-block;과 그 가능성을 부모 상자 안에 세로로 정렬 할 수 있습니다. 이 기법을 사용하면 엘리먼트의 높이와 너비를 알지 못해도 요소를 정렬 할 수 있습니다.하지만 부모의 높이를 최소한으로 알고 있어야합니다.
HTML이이 경우;
<div id="container">
<div id="aligned-middle" class="inline-block">Middleman</div>
<div class="strut inline-block"> </div>
</div>
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
*display:inline;/* for IE < 8 */
*zoom:1;/* for IE < 8 */
}
"/ * for IE < 8 * /"으로 표시된 규칙은 조건부 주석을 사용하여 별도의 스타일 시트에 배치해야합니다.
당신은 여기의 작업 예제를 볼 수 있습니다 http://jsfiddle.net/UXKcA/3/
편집 : (이 특정 조각 IE6 및 ff3.6 테스트,하지만이 많이 사용, 그것은 꽤 크로스 브라우저입니다 당신이 필요합니다. FF < 3에 대한 지원은 또한 .inline-block 규칙 내에서 display:inline-block;에서 display:-moz-inline-stack;를 추가해야합니다.) 폭과 높이가 사전에 정말 알 수없는 경우
는 "다음 설정 자바 스크립트/jQuery를 잡아해야합니다 margin-left와 margin-top 값을보고 클라이언트가 페이지로드 중에 이 신속하게 이동되어 div가 "wtf?"경험을 유발할 수 있다는 사실을 알게됩니다. "
당신은 DOM이 준비가되면, 사업부를 .hide()로드 페이지를 기다릴 수는 다시 DIV를 margin-left 및 margin-top 값 사업부를 설정하고 .show().
$(function(){
$("#content").hide();
)};
$(window).bind("load", function() {
$("#content").getDimSetMargins();
$("#content").show();
});
악의적 인 일이지만 allready라면 CSS에서 숨기고 jq가로드 될 때만 표시하십시오. – Dementic
확인 이 가지
HTML 정렬 속성 값 센터 다음이 Demo jsFiddle
설정
CSS 마진 왼쪽 마진 오른쪽 및 속성이 설정 값 자동
CSS
<style type="text/css">
#setcenter{
margin-left: auto;
margin-right: auto;
// margin: 0px auto; shorthand property
}
</style>
HTML
<div align="center" id="setcenter">
This is some text!
</div>
정렬이라고 말하면 div를 정렬하려는 것과 명확하지 않습니다. 당신은 div를 중심에 두는 것을 의미합니까? –
중앙에서 div를 수직으로 정렬하려합니까? – Starx
죄송합니다. 센터 정렬을 의미합니다. –