1. 홈
  2. 질의 응답
  3. 상자와 그 내용을 CSS 가운데에 배치하는 방법은 무엇입니까?

상자와 그 내용을 CSS 가운데에 배치하는 방법은 무엇입니까?

2012-01-22 4 views
0

다른 답변을 살펴 봤지만 특정 경우에 제대로 작동하지 못했습니다. 아래 코드 전체를 단순화하고 포함 시켰습니다. 기본적으로 텍스트는 파란색 상자에 표시됩니다. 상자 중앙에 놓는 방법을 알고 싶습니다. #content는 폭이상자와 그 내용을 CSS 가운데에 배치하는 방법은 무엇입니까?

<!DOCTYPE html> 

<html> 
<head> 
    <style type="text/css"><!-- 
#content { 
width:500px; 
padding: 10px 10px 10px; 
background-color: #D1ECFF; 
position: relative; 
border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
} 
--></style> 
</head> 
<body> 

<div id="content"> 

    <h2>Create</h2> 

</div> 
</body> 
</html>

출처

2012-01-22 deltanovember

+0

h2의 스타일은 어디에 있습니까? "파란색 상자"를 정의하는 스타일은 어디에 있습니까? 질문에 대답하기 위해 각 요소에 ** 고정 ** 또는 ** 변수 ** 높이와 너비가 있는지 알아야합니다. 이러한 세부 사항이 없으면 질문이 극도로 애매하며 대답하기 어려울뿐 아니라 같은 문제가있는 다른 사람들에게 도움이되지 않습니다. –

답변

2

때문에 auto에 왼쪽과 오른쪽 여백을 설정할 수 있습니다. 그러면 요소가 부모 요소의 가운데에 배치됩니다. 코드 margin: 0 auto;의 짧은 비트는 위쪽/아래쪽 여백을 0으로 설정하고 왼쪽/오른쪽을 자동으로 설정합니다.

#content { 
    margin: 0 auto; 
    width:500px; 
    ...

출처

2012-01-22 04:19:49 mrtsherman

관련 문제

 관련 문제