찬성

• 콘텐츠는 높이를 동적으로 변경할 수 있습니다(높이는 CSS에 정의되어 있지 않습니다).
• 공간이 충분하지 않으면 콘텐츠가 잘리지 않습니다.

마이너스

• IE 7 이하에서는 작동하지 않습니다
• 중첩된 태그가 많음

두 번째 방법

이 방법은 상단을 50%로 설정하고 여백 상단에서 콘텐츠 높이의 절반을 뺀 div의 절대 위치 지정을 사용합니다. 이는 객체가 CSS 스타일에 정의된 고정 높이를 가져야 함을 의미합니다.

높이는 고정되어 있으므로 Overflow:auto를 설정할 수 있습니다. 콘텐츠가 포함된 div의 경우 콘텐츠가 맞지 않으면 스크롤 막대가 나타납니다.

찬성

• 모든 브라우저에서 작동합니다.
• 불필요한 중첩이 없습니다.

마이너스

• 공간이 충분하지 않으면 콘텐츠가 사라집니다. 예를 들어 div가 본문 안에 있고 사용자가 창을 더 작게 만든 경우 스크롤 막대가 나타나지 않습니다.

세 번째 방법

이 방법에서는 콘텐츠 div를 다른 div로 래핑합니다. 높이를 50%(높이: 50%;)로 설정하고 아래쪽 여백을 높이의 절반(margin-bottom:-contentheight;)으로 설정하겠습니다. 콘텐츠는 부동을 지우고 중앙에 배치됩니다.

찬성

• 모든 브라우저에서 작동합니다.
• 공간이 충분하지 않은 경우(예: 창이 축소된 경우) 콘텐츠가 잘리지 않고 스크롤 막대가 나타납니다.

마이너스

• 나는 한 가지만 생각할 수 있습니다: 여분의 빈 요소가 사용되고 있다는 것입니다.

네 번째 방법.

이 방법은 position:absolute 속성을 사용합니다. 고정된 크기(너비 및 높이)가 있는 div의 경우. 그런 다음 좌표를 top:0으로 설정합니다. 하단:0; , 높이가 고정되어 있어서 늘어나지 않고 중앙에 정렬됩니다. 이는 고정 너비 블록 요소(여백: 0 auto;)를 수평으로 중앙에 맞추는 잘 알려진 방법과 매우 유사합니다.

찬성

• 매우 간단합니다.

마이너스

• Internet Explorer에서는 작동하지 않습니다
• 컨테이너에 공간이 충분하지 않으면 스크롤 막대 없이 내용이 잘립니다.

5번째 방법

이 방법을 사용하면 텍스트 한 줄을 가운데 정렬할 수 있습니다. 간단히 텍스트 높이(line-height)를 요소 높이(height)와 동일하게 설정합니다. 그러면 중앙에 선이 표시됩니다.

찬성

• 모든 브라우저에서 작동합니다.
• 텍스트가 맞지 않으면 자르지 않습니다.

마이너스

• 텍스트에만 작동합니다(블록 요소에는 작동하지 않음).
• 한 줄 이상의 텍스트가 있으면 매우 나빠 보입니다.

이 방법은 버튼이나 텍스트 필드의 텍스트 중앙 정렬과 같은 작은 요소에 매우 유용합니다.

이제 수직 중앙 정렬을 달성하는 방법을 알았으니 다음과 같은 간단한 웹사이트를 만들어 보겠습니다.

1 단계

의미론적 마크업으로 시작하는 것은 항상 좋습니다. 우리 페이지는 다음과 같이 구성됩니다.

• #floater(콘텐츠를 중앙에 배치)
• #centred(중앙 요소)
  • #옆
    • #심벌 마크
    • #nav(목록
    • #콘텐츠
  • #bottom (저작권 및 기타 관련)

  다음과 같은 HTML 마크업을 작성해 보겠습니다.

  회사

  • 집
  • 제품
  • 블로그
  • 연락하다
  • 에 대한

  페이지 제목

  프로세스 중심 협업 및 아이디어 공유 후 부가가치 아웃소싱을 전체적으로 재설계합니다. 활성화된 필수 사항을 통해 영향력 있는 틈새 시장을 적극적으로 단순화합니다. 매력적인 시나리오 이후 전체적으로 프리미엄 혁신을 주도합니다. 최첨단 제조 제품을 통해 인적 자본의 높은 기준을 원활하게 재투자하십시오. 강력한 보탈보다 먼저 표준 준수 스키마를 구별적으로 신디케이트합니다. 즉시 사용 가능한 정보와 관련하여 활용된 웹 준비 상태를 고유하게 재구성합니다.

  제목 2

  고객 지향 프로세스가 아닌 맞춤형 웹 준비성을 효율적으로 수용합니다. 적극적 기술에 대비하여 크로스 플랫폼 필수 사항을 적극적으로 확장합니다. 전사적 인터페이스 없이 다분야 메타서비스를 편리하게 강화합니다. 집중된 e-마켓을 통해 경쟁력 있는 전략 테마 영역을 편리하게 간소화합니다. 부가가치 시장과 비교하여 세계적 수준의 커뮤니티를 인광적으로 신디케이트합니다. 강력한 e-서비스에 앞서 전체적인 서비스를 적절하게 재창조합니다.

  저작권 고지는 여기에 표시됩니다.

  
  
  

  2 단계

  이제 페이지에 요소를 배치하는 가장 간단한 CSS를 작성하겠습니다. 이 코드를 style.css 파일에 저장해야 합니다. 링크가 html 파일에 기록되는 것은 바로 이것입니다.

  Html, 본문(여백: 0; 패딩: 0; 높이: 100%; ) 본문( 배경: url("page_bg.jpg") 50% 50% 반복 없음 #FC3; 글꼴 계열: Georgia, Times, serifs; ) #floater ( 위치: 상대; 부동: 왼쪽; 높이: 50%; 여백-하단: -200px; 너비: 1px; ) #centered ( 위치: 상대; 지우기: 왼쪽; 높이: 400px; 너비: 80%; 최대 -너비: 800px; 최소 너비: 400px; 여백: 0 자동; 테두리: 4px 솔리드 #666; ) #bottom ( 위치: 절대; 하단: 0; ) #nav ( 위치: 절대; 왼쪽: 0 ; 하단: 0; 패딩: 20px; #content(위치: 절대; 왼쪽: 0; 상단: 0; 하단: 0; 오버플로: 자동; 패딩: 20px;

  콘텐츠 센터를 정렬하기 전에 본문과 HTML의 높이를 100%로 설정해야 합니다. 높이는 내부 및 외부 패딩(padding 및 margin) 없이 계산되므로 스크롤바가 없도록 패딩(padding)을 0으로 설정합니다.

  "플로터" 요소의 아래쪽 여백은 콘텐츠 높이(400px)의 절반, 즉 -200px와 같습니다.

  이제 페이지는 다음과 같이 표시됩니다.

  

  #중앙 요소 너비 80%. 이로 인해 작은 화면에서는 사이트가 더 좁아지고 큰 화면에서는 더 넓어집니다. 대부분의 사이트는 왼쪽 상단에 있는 새로운 와이드 모니터에서 음란해 보입니다. min-width 및 max-width 속성은 페이지가 너무 넓거나 너무 좁아 보이지 않도록 페이지를 제한합니다. Internet Explorer는 이러한 속성을 지원하지 않습니다. 고정폭으로 설정해야 합니다.

  #centered 요소에는 position:relative 세트가 있으므로 그 안에 있는 요소의 절대 위치 지정을 사용할 수 있습니다. 그런 다음 Overflow:auto;를 설정합니다. 내용이 맞지 않으면 스크롤바가 나타나도록 #content 요소에 사용합니다.

  3단계

  마지막으로 할 일은 페이지를 좀 더 매력적으로 보이도록 몇 가지 스타일을 추가하는 것입니다. 메뉴부터 시작해 보겠습니다.

  #nav ul ( 목록 스타일: 없음; 패딩: 0; 여백: 20px 0 0 0; 텍스트 들여쓰기: 0; ) #nav li ( 패딩: 0; 여백: 3px; ) #nav li a ( 디스플레이: 블록; 배경 색상: #e8e8e8; 여백: 0; 테두리 하단: 1px 솔리드: 오른쪽; 내용: """; 글꼴 두께: 굵게; 부동: 오른쪽; 여백: 0 2px 0 5px; f8f8f8; 테두리 하단 색상 : #777; ) #nav li a:hover::after ( 여백: 0 0 0 7px; 색상: #f93; ) #nav li a:active ( 패딩: 8px 7px 6px 7px; )

  메뉴를 더 보기 좋게 만들기 위해 우리가 한 첫 번째 일은 list-style:none 속성을 설정하여 글머리 기호를 제거하고 패딩과 패딩도 설정하는 것이었습니다. 왜냐하면 기본적으로 브라우저마다 크게 다르기 때문입니다.

  그런 다음 링크가 블록 요소로 렌더링되도록 지정했습니다. 이제 표시되면 해당 요소가 위치한 요소의 전체 너비에 걸쳐 늘어납니다.

  메뉴에 사용한 또 다른 흥미로운 점은 의사 클래스:before 및:after입니다. 요소 앞뒤에 무언가를 추가할 수 있습니다. 이는 각 링크 끝에 화살표와 같은 아이콘이나 기호를 추가하는 좋은 방법입니다. 이 트릭은 Internet Explorer 7 이하에서는 작동하지 않습니다.

  

  4단계

  그리고 마지막으로 디자인에 나사 몇 개를 추가해 더욱 아름다워질 것입니다.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( 글꼴 계열: Helvetica, Arial, sans- serif; 글꼴 두께: 일반; 색상: #666; ) h1 ( 색상: #f93; 테두리 하단: 1px 솔리드 #ddd; 문자 간격: -0.05em; 글꼴 두께: 굵게; 여백 상단: 0; 패딩 상단: 0; ) #하단 ( 패딩: 10px; 글꼴 크기: 0.7em; 색상: #f03; ) #logo ( 글꼴 크기: 2em; 텍스트 정렬: 센터; 색상: #999; ) #logo 강함( 글꼴 두께: 일반; ) #logo 범위( 디스플레이: 블록; 글꼴 크기: 4em; 줄 높이: 0.7em; 색상: #666; ) p, h2, h3( 줄 높이: 1.6em; ) (색상: #f03; )

  이러한 스타일에서는 #centered 요소에 둥근 모서리를 설정했습니다. CSS3에서는 border-radius 속성을 사용하여 이 작업을 수행합니다. Mozilla Firefox 및 Safari/Webkit에 -moz 및 -webkit 접두사를 사용하는 것 외에는 일부 브라우저에서는 아직 구현되지 않았습니다.

  

  호환성

  이미 짐작하셨겠지만 호환성 문제의 주요 원인은 Internet Explorer입니다.

  • #floater 요소에는 너비가 설정되어 있어야 합니다.
  • IE 6에는 메뉴 주위에 추가 패딩이 있습니다.

  조회수 235881회

  div 블록을 생성할 때 순수한 CSS를 사용하여 div를 가로 및 세로로 중앙에 배치해야 하는 상황에 직면했을 것입니다. 예를 들어 . 센터링을 구현하는 방법에는 여러 가지가 있으며, 이 기사에서는 CSS 또는 jQuery를 사용하여 내가 가장 좋아하고 가장 쉬운 방법을 공유하겠습니다.

  첫째, 기본 사항은 다음과 같습니다.

  CSS의 가로 가운데 맞춤

  이것은 하기 쉽습니다. 여유우리를 위해 div차단하다.

  클래스명( 여백:0 자동; 너비:200px; 높이:200px; )

  div 블록을 가로로만 가운데에 배치하려면 블록의 너비(너비)를 결정하고 속성을 사용해야 합니다. 자동여백을 위해 왼쪽과 오른쪽. 이 방법은 모든 블록 요소(div, p, h1 등)에 작동합니다. 인라인 요소(링크, 이미지...)에 가로 가운데 맞춤을 적용하려면 매개변수를 적용해야 합니다. 표시하다:차단하다;

  CSS의 가로 및 세로 가운데 맞춤

  div 블록을 가로와 세로로 동시에 중앙에 배치하는 것은 조금 더 까다롭습니다. div 블록의 크기를 미리 알아야 합니다.

  클래스 이름(너비:300px; 높이:200px; 위치:절대; 왼쪽:50%; 위쪽:50%; 여백:-100px 0 0 -150px; )

  사용하여 순수한블록의 위치를 ​​지정함으로써 주변 요소에서 블록을 분리하고 브라우저 창의 크기를 기준으로 블록의 위치를 ​​결정할 수 있습니다. div 블록을 다음으로 이동하세요. 50% 창의 왼쪽과 위쪽에 있습니다. 이제 블록의 왼쪽 상단이 브라우저 창 중앙에 있습니다. 남은 것은 div 블록을 다음으로 이동하여 페이지 중앙에 설치하는 것입니다. 너비의 절반왼쪽과 높이의 절반위로. 만세! 그 결과 순수 CSS 코드를 사용하여 뛰어난 블록 센터링이 이루어졌습니다.

  jQuery를 사용한 수평 및 수직 센터링

  앞서 언급했듯이 CSS 센터링 방법은 고정된 크기에서만 작동합니다. 차원이 정의되지 않은 경우 jQuery 메서드가 도움이 됩니다.

  $(window).resize(function())( $(".className").css(( 위치:"절대", 왼쪽: ($(window).width() - $(".className").outerWidth ( ))/2, 상단: ($(window).height() - $(".className").outerHeight())/2 )); // 창이 로드될 때 함수를 실행하려면: $(window).resize();

  이 메서드의 작업은 다음 줄을 사용하여 resize() 함수를 실행하는 것입니다. $(창).크기 조정(). 이 기능은 브라우저 창의 크기가 조정될 때마다 작동합니다. 우리는 사용 바깥너비()그리고 외부높이(), 왜냐하면 대조적으로 너비()그리고 키(), 반환되는 크기에 패딩과 테두리 두께가 포함됩니다. 마지막 줄은 페이지가 로드될 때 div 블록을 중앙에 배치하는 프로세스를 시작합니다.

  이 방법을 사용하면 div의 크기를 알 수 없다는 장점이 있습니다. 가장 큰 단점은 JavaScript가 활성화된 경우에만 작동한다는 것입니다. 따라서 이 방법은 VKontakte, Facebook 등과 같은 다기능 인터페이스에 적합합니다.

  언제나 그렇듯이, 댓글을 통해 여러분이 선호하는 블록 중심 정렬 방법을 자유롭게 제안해 주세요.

  웹 페이지를 레이아웃하는 과정에서 블록을 중앙에 배치하는 작업은 매우 일반적입니다. 이는 수직 또는 수평 중심이 될 수 있습니다.

  예를 들어 사이트의 너비가 고정되어 있는 경우 브라우저 창 중앙에 정렬하는 것이 합리적입니다. 이렇게 하면 텍스트를 더 쉽게 읽을 수 있습니다(특히 모니터가 큰 경우). 일부 디자인에서는 일반적으로 브라우저 창 중앙에 블록을 배치하는 작업이 포함됩니다. 즉, 수직 및 수평 중앙에 배치됩니다.

  먼저 수평 센터링에 대해 이야기해 보겠습니다. 가장 널리 사용되는 기술은 오른쪽과 왼쪽의 치수를 설정하여 블록을 중앙에 맞추는 것입니다. "자동"으로 여백. id = "container"이고 너비가 860px인 블록을 중앙에 배치한다고 가정해 보겠습니다. 이 경우 CSS 파일에 다음을 작성해야 합니다.

  #컨테이너(
  배경색:#EEE;
  너비:860px;
  여백:0px 자동;
  }

  그러나 I.E. 이전 버전(예: 5.0)에서는 이 블록을 중앙에 정렬하지 않습니다. 물론 더 이상 그런 오래된 브라우저를 사용하는 사람은 없지만(일일 방문자 1800명 중 1명만), 만약을 대비해 그곳에서도 작동하도록 하는 것이 좋습니다 :)

  이렇게 하려면 상위 요소, 즉 블록의 중심에 있는 요소(보통 상위 요소는 BODY 태그임)에서 매개변수를 설정해야 합니다. 텍스트 정렬:가운데. 이 경우 블록은 중앙에 정렬되지만 모든 내용도 중앙에 정렬되지만 필요하지는 않습니다. 따라서 이 블록 내에서 기본 정렬을 설정합니다. 텍스트 정렬:왼쪽 .

  본문(텍스트 정렬:가운데)

  #컨테이너(
  배경색:#EEE;
  너비:860px;
  여백:0px 자동;
  텍스트 정렬:왼쪽;
  }

  를 기반으로 블록을 수평으로 정렬하는 또 다른 방법도 있습니다. 아시다시피 기본적으로 모든 블록 요소는 상위 요소의 왼쪽 가장자리에 눌려집니다. 따라서 중앙에 정렬하려면 다음이 필요합니다.

  2. 브라우저 창 너비의 50%만큼 오른쪽으로 이동합니다.

  3. 네거티브 패딩을 사용하여 블록 너비의 절반에 해당하는 거리만큼 왼쪽으로 이동합니다.

  이렇게 하면 블록이 중앙에 위치하게 됩니다. 더 명확하게 이해하려면 아래 비디오를 시청하십시오.

  예시 CSS 코드:

  #컨테이너(
  배경색:#559964;
  위치:절대;
  왼쪽:50%;
  여백-왼쪽:-430px;
  너비:860px;
  }

  브라우저 창을 기준으로 하지 않고 예를 들어 다른 블록을 기준으로 블록을 배치하려면 이 다른 블록에 대해 다음을 설정해야 합니다. 위치:상대적;

  중앙에 배치되어야 하는 #container 블록이 #wrap 블록 내부에 있다고 가정해 보겠습니다. 그러면 코드는 다음과 같습니다.

  #wrap(위치:상대)

  #컨테이너(
  배경색:#559964;
  위치:절대;
  왼쪽:50%;
  여백-왼쪽:-430px;
  너비:860px;
  }

  이제 블록을 페이지 중앙에 정렬해야 하는 경우를 고려해 보겠습니다. 수평 및 수직 센터링을 동시에 적용합니다. 여기서 다시 포지셔닝이 작용합니다. 그래서 우리는 다음이 필요합니다:

  1. 블록을 절대 위치로 설정

  2. 오른쪽으로 50%, 아래로 50% 이동하여 왼쪽 상단 모서리를 브라우저 창 중앙에 배치합니다.

  3. 네거티브 패딩을 사용하여 블록 높이의 절반에 해당하는 거리만큼 위쪽으로 이동하고 블록 너비의 절반에 해당하는 거리만큼 왼쪽으로 이동합니다.

  그러면 웹페이지 중앙에 블록이 배치됩니다.

  블록의 높이가 600px이고 너비가 860px이라고 가정해 보겠습니다. 그러면 CSS 코드는 다음과 같습니다.

  #컨테이너(
  배경색:#559964;
  위치:절대;
  상단:50%;
  왼쪽:50%;
  여백 상단:-300px;
  여백-왼쪽:-430px;
  높이:600px;
  너비:860px;
  }

  원칙 자체가 당신에게 명확하기를 바랍니다.

  이 강의 평가: 1 2 3 4 5

  코멘트:

  제가 가장 먼저 강의를 시청하겠습니다!!!

  어... 두 번째 =) 최근 IE에서 이 문제가 발생해서 오랫동안 고생했습니다.)) 감사합니다 =)

  감사합니다. 북마크한 페이지)))

  새로운 수업을 해주셔서 정말 감사합니다, Andrey!

  그냥 감사합니다. 여기에 추가할 내용이 없을 것 같습니다.))

  교훈을 주셔서 감사합니다. 며칠 전에 문자 그대로 이 작업을 시도했지만 약간의 고통을 겪고 일시적으로 미뤄두었습니다.

  하지만 문제가 있습니다. Mozille Firefox의 사이트는 정렬을 원하지 않고 왼쪽 가장자리에 고정되어 있습니다. 위의 어느 것도 도움이 되지 않습니다(Opera에서도 동일).

  왜 이것이 작동하지 않습니까? - "브라우저 창을 기준으로 하지 않고 예를 들어 다른 블록을 기준으로 블록을 배치하려면 이 다른 블록에 대해 position:relative를 설정해야 합니다."

  정말 감사합니다!! 정말 감사합니다!

  모든 것이 괜찮지만 어떤 이유로든 브라우저를 업데이트한 후에만 모든 이미지가 제자리에 나타납니다. 왜 이런 일이 발생하는지 알려주세요.

  안드레이 씨, 사이트 검색을 추가해주세요.

  의견을 추가하다.