Autor Zpráva
WeeHool
Profil *
tak sem oravdu zvědavej, kdo mi dokáze proadit..
mám kód cca:
      <div id="table06">
        <div class="bunka02">
          <div class="obal01">
            <div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/8643_001_300x450.jpg" alt="Hliníkové štafle, Hailo L 90 Stepke, 2 x 3 stupně" height="150"></div></div>
          </div>
          <div class="obal01">
            <div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4321_001_300x450.jpg" alt="Hliníkové štafle, Hailo L 90 Stepke, 2 x 2 stupně" height="150"></div></div>
          </div>
          <div class="obal01">
            <div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4423_001_300x450.jpg" alt="Hliníkové štafle, Hailo ChampionsLine L90 225, 2 x 3 stupně" height="150"></div></div>
          </div>
          <div class="obal01">
            <div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4422_001_300x450.jpg" alt="Hliníkové štafle, Hailo ChampionsLine L90 225, 2 x 2 stupně" width="150"></div></div>
          </div>
          <div class="obal01">
            <div class="bunka03"><div class="image"><img src="http://www.hlinikoveschudky.cz/image/data/produkty/4392_801_300x450.jpg" alt="Hliníkové schůdky, Hailo K30, 2 stupně" height="150"></div></div>
          </div>
        </div<
      </div>
a css:
#table06 {
  position: relative;
  width: 875px;
  float: left;
.bunka02 {
  width: auto;
  height: 250px;
}
.bunka03 {
  width: 150px;
  height: 150px;
  border: 1px solid #cccccc;
  text-align: center;
  display: table;
  margin-left: 12.5px;
}
.obal01 {
  width: 175px;
  height: 250px;
  float: left;
}
.image {
  display: table-cell;
  vertical-align: middle;
  background: #c8ffff;
}
}

vo co de: ve čtverečku 150x150 se mi z databáze načítaj obrázky a někdy maj třeba 140x150, někdy třeba 150x140, ale prostě ne více, než 150x150
no a problém je.. že se mi objevuje 5px mezera pod obrázkem v barvě backgroundu .image
jak se do prkýnka tý mezery zbavím?? já už sem z toho celej jalovej.. moc díky za odpověď..
Davex
Profil
Stačí zadat nadpis tohoto tématu do vyhledávače a vyskočí na tebe Mezera pod obrázkem nebo Mezera pod obrázkem.
WeeHool
Profil *
no samozřejmě, že sem to už hledal.. jinak bych to nepsal.. display: block mi zničí vertical-align




rámeček má správnou velikost, jak je ten čtvrtý..
samozřejmě díky tomu, že se tam objeví 5px mezera zvětší se rámeček u ostatních, kde je obrázek o výšce 150px na 155px


a přihodil sem teda ještě:
.image img {
  display: block;
}

tak vertical-align drží, ale zase to je všechno vlevo..
WeeHool
Profil *
vyřešeno:
.image {
  display: table-cell;
  vertical-align: middle;
  line-height: 0px;
}
Trejpa
Profil
WeeHool:
V odkázaných příkladech jsem display: block nedoporučoval, jen ho uvedl jako náhradní řešení s drobnými problémy. Starší Internet Explorer hodnotu display: table-cell neumí. Vertikální zarovnání jednoho řádku v elementu známé výšky je velmi prosté:

.image img { vertical-align: middle; }
.image { line-height: 150px; }

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: