어떻게 contents 를 vertical 중앙 정렬 시킬 것인가? ( vertical-align 에 대한 오해 )

어떻게 contents 를 vertical 중앙 정렬 시킬 것인가?  ( vertical-align 에 대한 오해 )

출처 : http://phrogz.net/CSS/vertical-align/index.html

table cell 에서의 vertical-align

-

css 의 vertical-align 이 valign attribute 와 비슷하게 작동한다.

최신 browser 에서는 아래 3개의 코드가 똑같이 작동한다.

<td valign="middle"> <!-- deprecated -->

<td style="vertical-align:middle">

<div style="display:table-cell; vertical-align:middle">

inline element 에서의 vertical-align 

-

inline element 에서는 align 처럼 작동한다.

최신 browser 에서는 아래 3개의 코드가 똑같이 작동한다.

<img align="middle">

<img style="vertical-align:middle">

<span style="display:inline-block; vertical-align:middle">

다른 element 에서의 vertically-center 는?

-

다른 element 에서는 사실 이 css attribute 가 적용되지 않는다. ( 예를 들면 normal div block )

만약 일반적인 block element 에 적용하면, inline children 이 inherit 하도록 사용되기만 하는 것이다.

그래서 어떻게 vertically-center 를 만드는가?

-

방법 1

1. container에 position:relative 나 position:absolute 를 준다.

2. child container 에 fixed height 를 준다.

3. child container 에 position:absolute 와 top:50% 를 준다.

4. child container 에 margin-top:-halfHeight 를 준다

<style type="text/css">

#outer_container{

position:relative;

}

#inner_container{

position:absolute;

top:50%;

height:10em;

margin-top:-5em;

}

</style>

<div id="outer_container">

<div id="inner_container">

<p> Hey Look! </p>

</div>

</div>

-

방법 2

1. container에 line-height 로 height 를 고정시켜준다.

<style type="text/css">

#container{

line-height:4em;

}

</style>

<p id="container">

Hey, this is vertically centered.

</p>

50%, Absolute, align, attribute, center, child container, Container, contents, css, deprecated, display, div, ELEMENT, fixed hieght, half height, ID, img, Inherit, inline, inline element, inline-block, line-height, margin-top, middle, normal div, P, Position, relative, style, table cell, table-cell, TD, text/css, Top, valign, vertical, vertical center, vertical-align, 방법