중요 css----! 스크립없이 박스 중앙 정렬--@ 정보
중요 css----! 스크립없이 박스 중앙 정렬--@
본문
포기 했던것 중에 하나입니다. 저 처럼 애타게 필요했던분 있으리라 생각하고
올려놓습니다. css 이제 어느정도 알것같습니다..
이소스 하나로 드디어 엠클럽 홈페이지가 완전한 중앙정렬을
이루는 쾌거을 가졌습니다.
불여시 와 익사 에서 실험했더니 잘됩니다. 다른 브라우저는 못했음.
-------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>박스를 화면 중앙에 정렬하기</title>
<style type="text/css">
html,
body {
height: 100%; /* body와 html의 높이를 100% 로 지정 */
margin: 0;
padding: 0;
}
#center {
width: 200px; /* 폭이나 높이가 일정해야 합니다. */
height: 200px; /* 폭이나 높이가 일정해야 합니다. */
position: absolute;
top: 50%; /* 화면의 중앙에 위치 */
left: 50%; /* 화면의 중앙에 위치 */
margin: -100px 0 0 -100px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */
border: 1px inset #ddd;
}
</style>
</head>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>박스를 화면 중앙에 정렬하기</title>
<style type="text/css">
html,
body {
height: 100%; /* body와 html의 높이를 100% 로 지정 */
margin: 0;
padding: 0;
}
#center {
width: 200px; /* 폭이나 높이가 일정해야 합니다. */
height: 200px; /* 폭이나 높이가 일정해야 합니다. */
position: absolute;
top: 50%; /* 화면의 중앙에 위치 */
left: 50%; /* 화면의 중앙에 위치 */
margin: -100px 0 0 -100px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */
border: 1px inset #ddd;
}
</style>
</head>
<body>
<h1>박스를 화면 중앙에 정렬하기</h1>
<div id="center">
센터정렬 박스
</div>
</body>
</html>
<h1>박스를 화면 중앙에 정렬하기</h1>
<div id="center">
센터정렬 박스
</div>
</body>
</html>
추천
0
0
댓글 3개
전 이렇게 사용합니다.
<html>
<head>
<title>타이틀</title>
<style type="text/css">
body
{
margin:0 0 0 0;
text-align:center;
}
#one
{
width:840px;height:500px;
margin:0 auto;
background-color: #FFB2B2;
text-align:left;
}
</style>
</head>
<body>
<div id="one">ㅎㅎㅎ</div>
</body>
</html>
<html>
<head>
<title>타이틀</title>
<style type="text/css">
body
{
margin:0 0 0 0;
text-align:center;
}
#one
{
width:840px;height:500px;
margin:0 auto;
background-color: #FFB2B2;
text-align:left;
}
</style>
</head>
<body>
<div id="one">ㅎㅎㅎ</div>
</body>
</html>
margin:0 auto; 이게 핵심이지 싶네요
auto; 가 불여시에서 자바콘솔을 보면 에러라고하긴하네요..맞나요?