이미지와 텍스트동시에 사용할때 세로로 정렬하기
안녕하세여...그누팁은 아니지만,
이미지와 텍스트를 동시에 사용할때 이미지크기를 텍스트 크기랑 마춰도 이미지랑 텍스트가 따로따로 놉니다. (위..아래로)
저도 검색해서 찾은건데, 한방에 해결했습니다..
위의 그림처럼, 테이블하나에 이미지랑 텍스트를 세로로 정렬시킬수 있습니다.
그누에서 아무리 찾아봐도 방법이 없길래...퍼왔습니다.
퍼온곳 링크 : http://miya.pe.kr/archives/73
중복이거나 잘못된 정보라면 자삭하겠습니다...알려주세여...
우선, 스타일을 아래처럼 만듭니다.
<style type="text/css">
div.centeringTest {
width: 100%;
}
div.centeringTest p {
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 1em;
}
div.centeringTest p.text {
width: 20em;
background-color: orange;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.centeringTest p {
display: inline;
zoom: 1;
}
</style>
<![endif]-->
그리고, 사용하는곳의 소스는 아래와 같습니다.
<div class="centeringTest">
<p><img src="이미지주소"></p>
<p class="text">들어갈 텍스트</p>
</div>
이미지와 텍스트를 동시에 사용할때 이미지크기를 텍스트 크기랑 마춰도 이미지랑 텍스트가 따로따로 놉니다. (위..아래로)
저도 검색해서 찾은건데, 한방에 해결했습니다..
위의 그림처럼, 테이블하나에 이미지랑 텍스트를 세로로 정렬시킬수 있습니다.
그누에서 아무리 찾아봐도 방법이 없길래...퍼왔습니다.
퍼온곳 링크 : http://miya.pe.kr/archives/73
중복이거나 잘못된 정보라면 자삭하겠습니다...알려주세여...
우선, 스타일을 아래처럼 만듭니다.
<style type="text/css">
div.centeringTest {
width: 100%;
}
div.centeringTest p {
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 1em;
}
div.centeringTest p.text {
width: 20em;
background-color: orange;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
div.centeringTest p {
display: inline;
zoom: 1;
}
</style>
<![endif]-->
그리고, 사용하는곳의 소스는 아래와 같습니다.
<div class="centeringTest">
<p><img src="이미지주소"></p>
<p class="text">들어갈 텍스트</p>
</div>
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 10개
- 파이어폭스 1, 2
- 넷스케이프 6, 7.1
- 사파리 2, 3
- 오페라 9.2 이상
- IE 5.01, 5.5, 6, 7 ( inline-block 으로 구현 )
라고 하네요.....IE 8버전은 이거 적용안해도 vertical-align:middle; <= 이게 먹힌다고 하네요.
멋지네요.
팁도 멋지고.
아웃로그인 스킨만들면 공개하도록 하겠습니다...^^