ugrás a tartalomhoz

DIV-ben kép szöveg egymás mellett

vtsoftware · 2010. Dec. 29. (Sze), 20.12
Üdv mindenkinek.

Előre is elnézést kérek, mivel majdnem biztos volt már ilyen téma, de fogalmam sincs hogy keressem...

A gondom a következő.
Adott egy div, benne egy 16x16-os ikon, mellette pedig egy szöveg:

<div class="box">
  <IMG src="images/icon.gif"> BOXCÍM
</div>
(CSS-ben csak a .box-hoz nyúlok, keretet adok neki.)

... a kép viszont 3px-el magasabban van mint a szöveg.
Ha a képnek ...
margin-top: 3px;
...-et mondok, akkor a szöveg is lejjebb csúszik 3px-el.

Tehát ez lesz az előzőből:

<div class="box">
  <IMG src="images/icon.gif"><div style="display: inline;margin-bottom: 3px;>BOXCÍM</div>
</div>
Így pedig minden marad a helyén.

Valakinek lenne ötlete hogy lehetne a képet és a szöveget "egy síkba hozni"?
Tehát a kép és a szöveg "teteje" egy szintbe essen.

Előre is köszönöm
‹ Slimob és imageScroll probléma Charset és ajax probléma ›
 ■
1

line-height

Poetro · 2010. Dec. 29. (Sze), 20.20
line-height: 16px;
2

Már megvolt...

vtsoftware · 2010. Dec. 29. (Sze), 20.26
Ezt már próbáltam.
Akár hova adom meg - ha a képnek, ha a címnek, ha a box-nak - mindig a kép marad fentebb.
3

vertical-align

Poetro · 2010. Dec. 29. (Sze), 20.42
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    .box {
      line-height: 16px;
      font-size: 12px;
    }
    .box img {
      vertical-align: bottom;
      width: 16px;
      height: 16px
    }
  </style>
</head>
<body>
  <div class="box"><img height="16" width="16" src="http://weblabor.hu/misc/favicon.ico" alt="icon" /> Szoveg</div>
</body>
</html>
4

Már megint...

vtsoftware · 2010. Dec. 29. (Sze), 20.57
Poetro... már megint ott a pont.
A vertical-align: bottom; volt a gyógyír.

Nekem nem igazán jutott volna eszembe.
Nagyon szépen köszönöm.