Web/WEB기본

[CSS] <img align="absmiddle"비표준태그를 웹표준CSS표현하기

saltdoll 2013. 1. 3. 13:59
반응형

img 태그와 글자의 위치를 맞추려면,

예전에는 img의 align속성의 값을 이용해서  align="absmiddle" 정렬을 했다.

과거 비표준 이미지 align값들

요즘은 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 

반응형