메모장



css로 수직 가운데정렬 4가지 방법 html/css



css로 수직 정렬하는 방법은 매우 다양하다.그러나 그 중 하나를 선택하기란 어렵다.
나는 그 중에서 최적의 방법을 같이 공유하려고 한다.

방법 1. div태그의 display속성을 table로 설정하는 방법이다. 이렇게 함으로써 div태그에
table속성에 있는 vertical-align 속성을 설정할 수 있다.

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

<div id="wrapper">
 <div id="cell">
  <div class="content">Content goes here</div>
 </div>
</div>

하지만...아쉽게도 ie6에서는 display:table속성이 먹지 않는다는것을 명심해야한다.


방법 2. 이번에는 absolute속성을 이용하여 top속성에 50%를 주어 콘텐츠를 내리고
margin을 이용하여 콘텐츠 높이의 절반을 margin-top:-120px;이와같이 마이너스값을
이용한다. 그럼으로써 높이를 고정시킬 수 있다.

#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}

<div id="content">Content Here</div>


방법 3. 이 방법은 텍스트의 한라인으로 센터정렬시킨다. 설정하는 법은 대상엘레멘트의 높이값과 line-height를
설정하여 주면, 텍스트가 센터로 위치해진다.

#content {height:100px; line-height:100px;}

<div id="content">Content Here</div>

방법 4. 이미지를 가운데 정렬 시키는 법 1번이 파이어폭스에서만 적용 되는 예제였다면
이번 예제는 ie에서도 적용되는 예제이다.

    <style type="text/css">
        .vCenter { display:table; width:400px; height:400px; border:1px solid red; }
        .vCenter span { display:table-cell; text-align:center; vertical-align:middle; }
            .vCenter span a {  }
    </style>

    <!--[if lt IE 8]> ie8보다 버전이 낮은 브라우져에서 실행
    <style type="text/css">
        .vCenter { position:relative; }
        .vCenter span { display:inline-block; position:absolute; top:50%; left:50%; }
            .vCenter span a { position:relative; top:-50%; left:-50%; }
    </style>
    <![endif]-->

    <div class="vCenter">
        <span>
            <a href="#">
                <img src="thumbnails.jpeg" alt="이미지" />
            </a>
        </span>
    </div>


핑백

덧글

  • 하늘빠 2009/12/09 12:47 # 삭제 답글

    참으로 큰일입니다. HTML 1.0 시절만 해도 웹브라우저가 렌더링 하기 쉬웠었는데.. 요즈음은, 브라우저 브랜드별로 또는 그 안에서도 버전별로 렌더링 결과가 천양지차 입니다. W3C 에서 아무리 표준을 만들어 내고 각 브라우저 업체들이 머리를 맞대어도 이렇게 Output 결과가 달라서야 어디.. 그러니, 어느 브라우저에서나 보일 수 있도록 하려니 화면을 잘게 쪼개고 단순화 하는 방법밖에는 없는 것같습니다.

    과연 표준은 뭘까요..? 내가 만들면 표준, 네가 만들면 비표준.. 이건가요..?
    표준이 나오고 표준에 가장 잘 맞는 웹브라우저가 나와도, 이전 버전들은 버릴건가요..?
    당연히 이전 버전은 버려야 하겠지요. 그렇다면 표준이 왜 필요할까요..?
    이러지 말고, 웹 브라우저들끼리 전쟁을 해서 이긴편을 표준으로 삼고,
    나머지 회사는 이긴 회사에 합병해 버리는 것이 맞지 않을까요..?
    이렇게 되면 단일화 된 표준이 가능할텐데요..

    그렇다면, 이제는 '누가 최후 승리자가 될까..?' 가 관심일 수밖에 없네요.
  • 지나가다 2012/03/06 17:33 # 삭제

    어떤 경우든지 독과점은 안좋습니다. 세상일은 항시 안좋은 쪽으로 흘러가기 때문이죠. 웹브라우저 독과점의 폐해는 예전에 이미 IE가 잘 보여주었습니다.
  • 지나가다 2013/08/10 09:42 # 삭제

    표준이 없어 갈팡질팡하는 것이 아니라. 사용자들의 기호가 다양해져 여러 브라우저들이 널리 쓰이는 것입니다. 개발자들에게는 번거로움이 있지만 사용자들에게 각각의 쓰임에 따라 브라우저를 선택할 수 있는 선택의 폭이 그만큼 넓어지는 것이지요.
  • 2010/01/07 14:38 # 삭제 답글 비공개

    비공개 덧글입니다.
  • seye2 2010/01/07 17:39 # 답글

    네 새해 복 많이 받으세요.
  • 영원 2011/03/25 13:40 # 삭제 답글

    담아갑니다..
  • 붕어빵 2011/12/23 12:54 # 삭제 답글

    감사합니다. 유용한 정보네요^^
  • 호야 2012/06/19 13:55 # 삭제 답글

    감사합니다. 출처 표시하고 담아가겠습니다.
  • 고뇌양 2013/02/13 11:05 # 삭제 답글

    좋은 정보 감사합니다! 출처 표시하고 담아가겠습니다.
  • 알사르ㅁ 2013/05/15 20:58 # 삭제 답글

    좋은 정보 잘 보고갑니다
    꽤 유용했어요
    감사~
  • 괭이 2013/08/20 14:20 # 삭제 답글

    덕분에 좋은 정보 얻어 갑니다~ 감사합니다~
댓글 입력 영역