CSS 다른 화면의 div 중앙 정렬

큰 화면에서이 사이트를 볼 경우이 CSS 및 HTML의 div가 중앙에 머물러 있는지 궁금합니다. 16 인치 스크린/모니터에서만 작업하고 있기 때문입니다. 더 크고 다른 화면으로 이동하거나 보더라도이 코드의 div가 가운데에 남을 것입니까? ?CSS 다른 화면의 div 중앙 정렬

html로

<html> 
<head> 
    <title>Midterm Practice</title> 
    <link rel = "stylesheet" type = "text/css" href = "layout.css"/> 
</head> 
    <body> 
    <div id = "container"> 
     <div id = "navbar"> 
     <ul> 

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

CSS의 규칙

body{background-color: pink;} 
#container{background-color: white;margin-left: auto;margin-right: auto;border: 1px solid white;border-radius: 15px;width: 1000px;height: 800px;} 
#navbar{position:absolute;}

난 그냥 사전을 추가 또는 평균 응답

출처

2012-02-21 KyelJmD

예. '# 컨테이너'에 절대 위치 또는 상대 위치가없고 컨테이너 내부에 있기를 원하면'# navbar'는 절대 위치를 가져서는 안됩니다. – Aprillion

navbar가 절대 위치에 있지 않아야하는 이유는 무엇입니까? 예, 저는 용기 안에 넣을 계획입니다. – KyelJmD

아마 navbar가 절대적 일 필요는 없지만 실제로해야 할 일이라면 컨테이너는 navbar가 절대 위치에 놓일 상대 위치를 가져야합니다. 나는 당신이 이것을 필요로하지 않는다고 의심하고 단지 컨테이너 안에 navbar를 띄울 수 있습니다. – drmonkeyninja

원하는 있어야한다 margin-left: auto; margin-right: auto;를 사용하여 위의하지 마십시오 CSS 함께 시작입니다 효과. 그들은 기본적으로 body 태그에 "container"div를 중심에 배치합니다. 컨테이너의 너비를 브라우저에서 테스트 할 수있는 것으로 줄임으로써 언제든지 직접 테스트 해 볼 수 있습니다 (Chrome 및 Firefox의 개발 도구는 브라우저에서 CSS를 사용하여 재생할 때 유용합니다).

출처

2012-02-21 11:56:26 drmonkeyninja

위치를 절대로 설정하면 어떻게됩니까? 여전히 작동할까요? – KyelJmD

위치를 적용하지 않으면 컨테이너 div에 절대적으로 적용됩니다. Absolute는 포함하는 마크 업 내의 위치를 지정하기위한 것이므로 기본적으로 요소의 모서리 좌표를 설정합니다. – drmonkeyninja

좋아. 고맙습니다. – KyelJmD

CSS 다른 화면의 div 중앙 정렬

답변

관련 문제