照恩

  1. 设计草案

CSS 수직 가운데 정렬 (테이블 없이!) Vertical Centering with CSS

이 방법은 테이블처럼 만들어서 테이블의 vertical-align 속성을 사용할 수 있도록

를 몇 개 세팅한다. (테이블의 vertical-align 속성은 다른 요소들에서는 굉장히 다르게 작동한다.)
 
일러 두기: 아마 “테이블을 사용하려던 건 아닌데” 하고 생각할지 모르겠다. 테이블을 사용할 때 주된 문제는 마크업을 시멘틱하게 유지해야 한다는 것이다. 테이블 코드를 짜지만 그게 사실 진짜 표는 아닌 경우, 테이블로 코딩하지 말아야 한다. (실제 표인 경우엔 테이블을 사용해도 아무 문제 없다.)
를 테이블로 생각하게 만들어서 생기는 유일한 문제는 브라우저가 일관되게 작동하지 못하게 된다는 점이다. 이건 미친 짓은 아니다. a에 display:block;을 주거나

에 display:inline;을 주는 것과 비슷한 것뿐이다.  9

 
[역자 주 - 한 줄에 여러 요소를 넣어야 할 때는 display: table 대신 display: inline-table을 사용할 수도 있다.]
 
 
#wrapper {display:table; height:100px; border:1px solid red; width:400px; text-align:center;}
#cell {display:table-cell; vertical-align:middle; border:1px solid blue;}
 
 
 
Content goes here
 
620421297_1390887145.26.jpg
 
장점
높이가 변해도 상관없다. (CSS에 높이를 지정하지 않아도 된다.)
wrapper에 공간이 없어도 내용이 잘리지 않는다.
 
단점
인터넷 익스플로러에서 작동하지 않는다. (심지어 IE8 베타에서도.)
태그 단계가 깊어진다. (그렇게 나쁜 건 아니다. 이건 주관적인 부분이다.)
 
방법2:
 이 방법은 position absolute를 사용한다. top을 50%로 설정하고 margin-top을 콘텐츠의 절반 높이만큼 음수로 설정한다. 이것은 요소의 높이를 CSS에서 지정해야 한다는 걸 의미한다.
 
높이를 지정해 두기 때문에, 내용이 넘치면 div 밖으로 튀어나간다. 대신에 스크롤바가 생기도록 콘텐츠 div에 overflow:auto;를 주고 싶을 것이다.
 
 
#content {position:absolute; top:50%; border:1px solid red; height:240px; margin-top:-120px; /* negative half of the height */}
 
 
  Content Here    
 
 
장점
모든 브라우저에서 작동한다.
태그가 깊이 들어가지 않는다.
 
단점
충분한 공간이 없으면 내용이 잘린다. (div가 body 밑에 있고, 사용자가 브라우저 창을 줄이면, 스크롤바가 나타나지 않는다.)

 

posted @ 2015-06-30 17:36  Jweb2  阅读(290)  评论(0编辑  收藏  举报