Just in Chronicles

Life as a Voyage

Vertically Aligning Text Using CSS, CSS를 활용한 텍스트 수직정렬

References: Understanding vertical-align or How (Not) To Vertically Center Content

For navigation or layout purpose, navigation text needs to be vertically centred. According to the web standard, vertical-align property is responsible for that. However, in practice, it doesn’t work properly and even though it works, it requires other settings and hacks, which I hate it.

Well, there is a simple approach to vertically centre the single line text. It doesn’t use vertical-align property. Instead, it uses line-height property like following:

   1: <div>

   2:     This is the text NOT vertically centred.

   3: </div>


   5: <div style="line-height: 50px;">

   6:     This is the text vertically centred.

   7: </div>

The results of these are:

This is the text NOT vertically centred.

This is the text vertically centred.

Are they different from each other? Make sure, both have fixed height outer tag element. Usually, each navigation element has fixed height, so this trick is useful. If the height is dynamically changing, a different approach should be considered.

네비게이션 레이아웃을 CSS로 구현하다 보면 텍스트를 수직으로 정렬시켜야 하는 경우가 종종 있게 마련이다. 보통 vertical-align 속성을 써서 하게 마련인데, 내공부족인지 어쩐지 몰라도 이게 잘 먹히지 않더라. 아니면 열라 복잡하게 다른 속성까지 건드려가면서 해야하거나…

근데, 위에서처럼 line-height 속성을 주게 되면 그 안의 텍스트들은 자동으로 가운데 정렬이 이루어진다. 물론, line-height 속성을 준다는 것은 고정적인 높이를 가지고 있다는 말이기 때문에 일반적으로 쓰기에는 무리가 있다만 그래도 네비게이션 레이아웃에서는 꽤 쓸만한 팁이 아닐까 싶다.


Written by Justin Yoo

12/06/2009 at 04:42