세로 맞춤 래퍼

Question

나는 지루함이있는 웹 사이트를 엉망으로 만들고, 내 랩을 세로 정렬하는 방법을 알아 내려고 노력하고 있는데, 나는 그것이 실패한 것이다. 저는 이미 수평으로 정렬했습니다. 수직으로 정렬하는 데 도움이 필요합니다. (예, 수직 정렬을 시도했습니다 : 중간이지만 작동하지 않습니다.)

* { margin:0; padding:0; } 
    html { height:100%; } 
    body { background:/*url(images/bg.jpg)*/#14181a; } 
    #wrap { width:960px; height:55%; margin:0 auto; background:#293033; } 

    <div id="wrap"> 
    <div id="logo"></div> 
    <div id="navgation"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
    </div> 

Answer 1

세로 정렬은 테이블 레이아웃을 사용하여 수행 할 수 있습니다. 표 셀로 표시되는 요소가 필요하고 상위 요소가 표로 표시되어야합니다. 그런 다음 수직 정렬을 추가하면 작동합니다.

먼저, 행동을 보여주는 js 피들입니다. 그것은 포장의 내용을 감싸는 가운데에 배치합니다! 상대 및 최고 값과 같은 : 당신이 원하는 경우 위치, 사업부 객체를 수직 정렬 사용 http://jsfiddle.net/YWdDC/1/

* { margin:0; padding:0; } 
    html { height:100%; } 
    .wrap-wrapper { 
     background: url('images/bg.jpg') #14181a; 
     display: table; 
    } 
    .wrap { 
     width:960px; 
     height:300px; 
     margin:0 auto; 
     background:#293033; 
     display: table-cell; 
     vertical-align: middle; 
    }​ 

    <div class="wrap-wrapper"> 
     <div class="wrap"> 
      <div id="logo">Logo</div> 
      <div id="navgation">Nav</div> 
      <div id="content">Content</div> 
      <div id="footer">Footer</div> 
     </div> 
    </div>​ 

Answer 2

(내가 오해하고 그냥 물어, 랩 자체에 중심을 필요로하고 내가 편집 할 수 있습니다 경우) 그래서 :

#wrap {width:960px; height:55%; margin:0 auto; background:#293033; position:relative; top:20px;} 

당신은 동적 첨자와 같은 특정 수직 정렬로 #wrap div의 내부 텍스트를 정렬 할 텍스트 컨테이너에 수직 정렬 사용하는 경우 :

#wrap span {font-size:14px; line-height:16px; vertical-align:2px;} 

Answer 3

하는 경우 구형 브라우저를 지원할 필요가없는 경우 디스플레이 상자를 사용할 수 있습니다. 저는 다음과 같은 클래스를 가지고 있습니다 :

.vertically_centered { 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 

    display: -moz-box; 
    -moz-box-orient: horizontal; 
    -moz-box-pack: center; 
    -moz-box-align: center; 

    display: box; 
    box-orient: horizontal; 
    box-pack: center; 
    box-align: center; 
} 

그 안에는 무엇이든 넣을 수 있습니다. "wrap"div를 수직으로 가운데에 배치하려면 vertical_centered 클래스를 body 요소에 할당 해보십시오.

유연한 상자를 사용하는 방법에 대한 자세한 내용은이 문서를 체크 아웃 할 수 있습니다 http://www.css3.info/introducing-the-flexible-box-layout-module/

Answer 4

귀하의 질문은 this post에서 논의 된 정확한 문제입니다.

방법 1

다음 예는 두 개 (사소) 가정한다. 당신이 이러한 가정을 만날 수있는 경우,이 메소드는 당신을위한 것입니다 :

1. 당신은 블록 내부의 중심과 그 내부 콘텐츠 블록에 대한 고정 높이를 지정 할 콘텐츠를 넣을 수 있습니다.
2. 이 콘텐츠를 절대적으로 배치하는 것이 좋습니다. . 위의 필수품을 수용 할 수있는 경우 (일반적으로 미세, 내용이 중심되는 내부의 부모 요소가 여전히 흐름에있을 수 있기 때문에

,이 솔루션은 다음과 같습니다

1. 위치로 부모 컨테이너를 지정 : 기준 또는 위치 :. 절대
2. 자식 컨테이너에 고정 된 높이를 지정
3. 세트 총수 :. 절대 상단 : 50 % 자식 컨테이너 상위의 중앙 상단을 아래로 이동
4. . 세트 m argin-top : -yy 여기서 yy는 항목을 상쇄하기위한 하위 컨테이너의 높이의 반입니다.

...

방법이 방법은 다음 조건을 만족시킬 수 있어야합니다 2

:

1. 당신은 당신이 원하는 텍스트의 한 줄이를 중심에있다.
2. 상위 요소에 고정 높이를 지정할 수 있습니다.

위의 필수품을 받아 들일 수 있다면,이 솔루션은 다음과 같습니다

1. 원하는 고정 높이 부모 요소의 라인 높이를 설정합니다. 그것이 내 수직 정렬에 필요한 대부분의 메뉴 항목으로 만 제공되기 때문에 일반적으로 잘 단일 라인으로 제한되어 있지만

나는 방법이 발견은 일반적으로 수직 정렬에 가장 간단하고 일관된 방법입니다 어쨌든 한 줄 필요합니다.