vertical-align:middle 을 사용!!!
로빈아빠
본문
css 만으로 웹을 만들다보면 div 같은 그룹 태그를 사용할때가 참 많다.
이 그룹 태그만 잘 사용하면 table 을 사용하지 않고도 충분히 웹을 만들수 있고
도 쉽게 바꿀수도 있다..
그런데 이 그룹태그를 사용하다보면, table 의 속성중 valign을 사용하고 싶을 때가 참 많다.
가운데로 위치하게 해야 하는데 style 태그중vertical-align 이 valign만큼...제 기능(?)을 발휘하지 못하다보니(정확히 말하면 차이가 있지만)... 어쩔수 없이 table을 태그를 사용하거나. 아니면 padding 값을 잘 사용해서 적당히 가운데 위치하게 할수 밖에 없다.
그러던중.. 우연히 찾게된 외국 사이트중 꽤나 재미있는 내용이 있어 소개함.
style 만으로도 충분히 valign효과를 줄수 있음~
http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html
이하 소스는 위 웹사이트에서 찾은 내용입니다..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style="#position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
이 그룹 태그만 잘 사용하면 table 을 사용하지 않고도 충분히 웹을 만들수 있고
도 쉽게 바꿀수도 있다..
그런데 이 그룹태그를 사용하다보면, table 의 속성중 valign을 사용하고 싶을 때가 참 많다.
가운데로 위치하게 해야 하는데 style 태그중vertical-align 이 valign만큼...제 기능(?)을 발휘하지 못하다보니(정확히 말하면 차이가 있지만)... 어쩔수 없이 table을 태그를 사용하거나. 아니면 padding 값을 잘 사용해서 적당히 가운데 위치하게 할수 밖에 없다.
그러던중.. 우연히 찾게된 외국 사이트중 꽤나 재미있는 내용이 있어 소개함.
style 만으로도 충분히 valign효과를 줄수 있음~
http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html
이하 소스는 위 웹사이트에서 찾은 내용입니다..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style="#position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
관련링크
댓글목록
등록된 댓글이 없습니다.