창 중앙에 원하게 놓은 래퍼 div가 있습니다. 내가 검색 창의 크기를 변경할 때절대 위치 지정 + 음의 여백이 창 크기가 왜곡 된 경우
#wrapper {
width: 960px;
margin-left: -480px;
position: absolute;
left: 50%;
}
유일한 문제는, 내가 윈도우의 중간 지점의 왼쪽 아무것도 볼 수 없습니다 :이 작업을 수행하기 위해 다음과 같은 CSS를 사용했다. 나는 이것이 음의 마진 때문이라는 것을 알고 있지만 이것을 교정 할 방법이 있습니까?
나는 다른 어떤 것보다 더 플로트하려고하고있다. 그러므로 자동 마진 트릭이 작동하지 않을 것이다.
여기에 내가 가지고있는 링크가 있습니다 : dev.connectionsquad.com.
페이지의 모든 div에 대해 다음을 제안합니다. body { text-align: center; } #wrapper { width: 1080px; margin: 0px auto; text-align: left; }
일부 브라우저의 경우 페이지에서 div 중심을 만들기 위해 body 태그에 text-align : center를 사용해야합니다.
나는 코드를 다시 작성과 같이,이 표준을 준수하고 제안 :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 600px;
}
body {
background: #222;
text-align: center
}
#content {
text-align: left;
display: inline-block;
position: absolute;
width: 40%;
min-width: 300px;
height: 50%;
min-height: 400px;
top: 10%;
margin-left: -20%;
padding: 25px;
background-color: #ccc;
background-image: url('/img/noise.png');
border: 5px solid #000
}
#background {
position: absolute;
width: 100%;
height: 250px;
top: 50%;
margin-top: -125px;
z-index: -1;
background-color: #666;
background-image: url('/img/placeholder.png');
border-top: 5px solid #eee;
border-bottom: 5px solid #eee;
}
a:active, a:visited {
color: #075f76
}
</style>
</head>
<body>
<div id="content">
<h1>Test</h1>
</div>
<div id="background"></div>
</body>
</html>
이 HTML5 - MDN를 참조하십시오.
'margin : 0 auto;'시도 했습니까? – cyborg86pl
저는 div의 중심을 창에두고 있지만, 다른 div보다 "떠 다니는"래퍼가 필요하다는 것을 알고 있습니다. 내가 뭘 하려는지에 대한 링크는 dev.connectionsquad.com –
입니다. 그럼 어떻게 2 divs를 하나씩 만들었습니까? 먼저 100 % 너비의 창과 div의 내부에 자동 여백을두고 가운데에 배치할까요? – cyborg86pl