반응형
img 태그와 글자의 위치를 맞추려면,
예전에는 img의 align속성의 값을 이용해서 align="absmiddle" 정렬을 했다.
요즘은 img태그에 align이 비표준이기에,
해당 처리를 CSS의 vertical-align속성을 이용해서 이미지 정렬를 주고 있다.
<style>
body { font-family: "Malgun Gothic", "굴림", "Gulim", "Arial";}
p { font-size: 12pt; color: #515151; }
a { text-decoration: underline; color: #1e5ca9; font-size: 11pt; }
.glossary_content > img { vertical-align: middle; }
</style>
<body>
<p class="glossary_content">
<img src="./images/pe_glossary_link_icon.png" /> <a href="#">홈페이지</a><br />
<img src="./images/pe_glossary_link_icon.png" /> <a href="#">나모 웹에디터</a>
</p>
</body>
Image Margin bottom.
Test 2: div태그안에 Img중간 정렬
<style type="text/css">
div img {
vertical-align: middle;
margin-bottom: .25em
}
</style>http://www.web-sheeps.com/rec/69-Image-vertical-align-with-CSS,-avoid-abs
반응형
'Web > WEB기본' 카테고리의 다른 글
| [CSS3] 드림위버 media queries js 미디어 쿼리를 이용한 리사이징 (0) | 2013.02.14 |
|---|---|
| text-overflow 영역에 글자 넘어갈때 처리 (0) | 2013.02.14 |
| [css] text-align:justify 텍스트 양쪽 정렬 (0) | 2013.01.19 |
| [CSS] Vendor-specific extensions 밴더별 확장 CSS스팩 (0) | 2013.01.14 |
| [CSS] 맑은 고딕 적용하기 (0) | 2013.01.03 |
| [CSS3] Image 원형 테두리 만들기 (0) | 2012.11.26 |
| 브라우저에서 사용되는 fakepath를 전체 경로로 수정하기 (0) | 2012.10.05 |
| [html5] link 요소에 대한 설명 (0) | 2012.05.15 |
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
(로그인하지 않으셔도 가능)