김효원, Swindler, coolx 님의 홈페이지

Programming

No.

780

Name.

swindler

Subject.

CSS 가운데 정렬

Main Cate.

CSS

Sub Cate.

Date.

2017-01-13 17:40

Hit.

1847 (121.78.49.66)

File.

그냥 화면 정가운데 이미지를 하나 놓고 싶었다.

css로 쉽게 될줄 알았는데, 이게 생각보다 복잡함.

특히나 vertical-align 이 꽤 이슈가 되나 보다.

하여튼, 몇가지 방법으로 해결함.

아래는 보통 CSS + Inline Image Technique 라고 부르는듯.

<style>
img {
position:absolute;
top: 50%;
left: 50%;
width: 479px;
height: 650px;
margin-top: -325px;
margin-left: -240px;
}
</style>

<body>
<img src='coming_soon.png'>
</body>

이건 CSS background-image Technique

<style>
html {
width: 100%;
height: 100%;
background: url(coming_soon.png) center center no-repeat;
}
</style>

이건 Table technique 이라는데, 좀 별로다.

<style>
html, body, #wrapper {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}

#wrapper td {
vertical-align: middle;
text-align: center;
}
</style>

<body>
<table id="wrapper">
<tr>
<td><img src='coming_soon.png'></td>
</tr>
</table>
</body>

일단 이 3가지는 실제로 해 보니 잘 나오긴 하네.

[바로가기 링크] : http://coolx.net/cboard/develop/780


[Modify] [Delete]		[Reply] [List]