H+V vycentrování obrázku o neznámé velikosti [EXPERTS ONLY]

Fórum › CSS

Petroff0

Věrný člen

9. 8. 2007 #1

Máte bloky s rozměry [150x150].
Najděte způsob, jak do nich vložit obrázky tak, aby střed bloku byl i středem obrázku.
---------- BONUSY:--------------
#Funguje ve všech moderních browserech
#A to s minimálními rozdíly ve vzhledu
#Bez JavaScriptu
#Originální nápady vítány
#Nekomplikovaný kód
---------- OBRÁZKY:--------------
http://knihy.cpress.cz/DataFiles/Book/00001785/KS0054.jpg [80x117]
http://knihy.cpress.cz/DataFiles/Book/00000549/KS0003.jpg [80x122]
http://knihy.cpress.cz/DataFiles/Book/00000855/KS0008.jpg [80x100]
http://knihy.cpress.cz/DataFiles/Book/00002749/K1404w.jpg [60x114]
http://knihy.cpress.cz/DataFiles/Book/00002846/KH0197_sme.jpg [95x70]
http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/natoc3_digi.gif [120x140]
http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/K1478_natoc.gif [90x105]

<div class ='cont' style="width:150px;height:150px">

</div>



<img src="http://knihy.cpress.cz/DataFiles/Book/00001785/KS0054.jpg" alt='obal' />

<img src="http://knihy.cpress.cz/DataFiles/Book/00000549/KS0003.jpg" alt='obal' />

<img src="http://knihy.cpress.cz/DataFiles/Book/00000855/KS0008.jpg" alt='obal' />

<img src="http://knihy.cpress.cz/DataFiles/Book/00002749/K1404w.jpg" alt='obal' />

<img src="http://knihy.cpress.cz/DataFiles/Book/00002846/KH0197_sme.jpg" alt='obal' />

<img src="http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/natoc3_digi.gif" alt='obal' />

<img src="http://knihy.cpress.cz/DataFiles/Document/00000843/ImgLib/K1478_natoc.gif" alt='obal' />

Nahlásit jako SPAM

IP: ...–

Lukáš Chadraba 0

Expert

9. 8. 2007 #2

Jestli tě dobře chápu, tak stačí použít horizontální centrování a tohle (http://www.jakpsatweb.cz/css/css-vertikalni-centrovani.html) kvůli horizontálnímu vycentrování ;) - sice to centruje podle okrajů obrázků, ale to má přeci stejný efekt, ne?

Nahlásit jako SPAM

IP: ...–

New Media Enthusiast[br] http://about.me/lukaschadraba

Petroff0

Věrný člen

10. 8. 2007 #3

1.YAHUOVO DEFINITIVNÍ ŘEŠENÍ jako definitivně jediný nebere IE7.
Jinak v ostatních to je paráda.
>>> IE6 neumí naprosto přesně počítat - když se mrkneš na poslední box s nejvyšším obrázkem
(a tedy uzounkými kraji => nejsou stejné,spodní je o pár pixelů širší). A zvláštní je že změnami
velikosti písma (IE nezmění absolutně zadané rozměry) lze tuto pixelovou nesymetrii ještě zvyšovat. <<<

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Horizontální&Vertikální centrování obrázku</title>

  <base href="http://knihy.cpress.cz/DataFiles/" />

  <style>

    .cont {width:150px; height:150px;  margin:20px; background: gray;

           display: table;

          _position: relative;

    }

    .cont div {_position: absolute; _top: 50%; _left: 50%;

                display: table-cell; vertical-align: middle;

    }

    .cont div img {display: block; margin: auto;

                   _position: relative; _top: -50%; _left: -50%;

    }

  </style>

</head>

<body>

  <div class="cont">

    <div>

      <img src="Book/00002846/KH0197_sme.jpg" />

    </div>

  </div>

  <div class="cont">

    <div>

      <img src="Book/00002749/K1404w.jpg" />

    </div>

  </div>

  <div class="cont">

    <div>

      <img src="Document/00000843/ImgLib/natoc3_digi.gif" />

    </div>

  </div>

</body>

</html>

1a. Úpravy za účelem funkce i v IE7 mě přivedly do situace, kdy kód sice funguje, ale jedině bez DOCTYPE deklarace.
Někde chyba? Anebo je to vykročení do slepé uličky?

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Horizontální&Vertikální centrování obrázku</title>

  <base href="http://knihy.cpress.cz/DataFiles/" />

  <style>

    .cont {width:150px; height:150px;  margin:20px; background: gray;

           display: table;

           position: relative;

    }

    .cont div {

                display: table-cell; vertical-align: middle;

    }

    * html .cont div {position: absolute; top: 50%; left: 50%}



    .cont div img {display: block; margin: auto;

    }

    * html .cont div img {position: relative; top: -50%; left: -50%;}

  </style>

</head>

<body>

  <div class="cont">

    <div>

      <img src="Book/00002846/KH0197_sme.jpg" />

    </div>

  </div>

  <div class="cont">

    <div>

      <img src="Book/00002749/K1404w.jpg" />

    </div>

  </div>

  <div class="cont">

    <div>

      <img src="Document/00000843/ImgLib/natoc3_digi.gif" />

    </div>

  </div>

</body>

</html>

2.Zkusil jsem nejlogičtější řešení:
Absolutně pozicovaný obrázek(=nahrazovaný prvek) s margin-auto,ale nějak mi nefunguje => obrázek zůstává v levém horním rohu.
Vycházel jsem z rovnice dané specifikací:
top/left + margin + (border+padding) + height/width + (padding+border) + margin + bottom/right = výška/šířka omezujícího bloku
Pro absolutně pozicované prvky/nahrazované/ platí:
Nastavíme-li top,left,bottom,right(=0), pak height/width jsou dány vnitřními rozměry,
a pokud jsou margin-left i margin-right oba auto, musí být shodné ==> CENTER

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

11. 8. 2007 #4

1b.Naposledy YAHUOVO DEFINITIVNÍ ŘEŠENÍ
Neuvědomil jsem si, že ve standardním režimu IE7 je v CSS kořen.prvek=html.
Tohle je jedna z těch méně častých situací, kdy je nutné v CSS separovat definice pro:
([IE<7] + [IE7]) vs. [OSTATNÍ]
Univerzálně použitelný + validní kód: (lépe či úsporněji to nejde)

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Horizontální&Vertikální centrování obrázku</title>

  <base href="http://knihy.cpress.cz/DataFiles/" />

  <style>

    .cont {width:150px; height:150px;  margin:20px; background: gray;

           display: table;

           position: relative;

    }

    .cont div { display: table-cell; vertical-align: middle }

    * html .cont div { position: absolute; top: 50%; left: 50% }

    *:first-child+html .cont div { position: absolute; top: 50%; left: 50% }



    .cont div img { display: block; margin: auto }

    * html .cont div img { position: relative; top: -50%; left: -50% }

    *:first-child+html .cont div img { position: relative; top: -50%; left: -50% }

  </style>

</head>

<body>

  <div class="cont">

    <div>

      <img src="Book/00002846/KH0197_sme.jpg" />

    </div>

  </div>

  <div class="cont">

    <div>

      <img src="Book/00002749/K1404w.jpg" />

    </div>

  </div>

  <div class="cont">

    <div>

      <img src="Document/00000843/ImgLib/natoc3_digi.gif" />

    </div>

  </div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

12. 8. 2007 #5

3. STEREO
Výhody: [validní][bez hacků][pro každý browser]
<BONUS> Centruje NAPROSTO PŘESNĚ (v IE při změně velikosti písma se ani nehne).
Nevýhoda: Dvojitý <img> zápis v HTML se projeví při vypnutých stylech jako stereo-obraz .

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Horizontální&Vertikální centrování obrázku</title>

  <base href="http://knihy.cpress.cz/DataFiles/" />

  <style>

    .cont      { width:150px; height:150px;  margin:20px; background: gray;

                 position: relative;

    }

    .cont div  { position: absolute; top:  50%; left:  50% }

    .cont .abs { position: absolute; top: -50%; left: -50%; visibility: visible }

    .cont img  { display: block; visibility: hidden }

  </style>

</head>

<body>

   <div class="cont">

     <div>

       <img src="Book/00002846/KH0197_sme.jpg" class="abs" />

       <img src="Book/00002846/KH0197_sme.jpg" />

     </div>

   </div>

   <div class="cont">

     <div>

       <img src="Book/00002749/K1404w.jpg" class="abs" />

       <img src="Book/00002749/K1404w.jpg" />

     </div>

   </div>

   <div class="cont">

     <div>

       <img src="Document/00000843/ImgLib/natoc3_digi.gif" class="abs" />

       <img src="Document/00000843/ImgLib/natoc3_digi.gif" />

     </div>

  </div>

</body>

</html>

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

12. 8. 2007 #6

Řešení není dokonalé (Opera a Firefox se nepatrně liší při vertical-align:middle, a odlišit tyto browsery pomocí CSS jednoduše neumím).
Zato je nejjednodušší.

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Horizontální&Vertikální centrování obrázku</title>

  <base href="http://knihy.cpress.cz/DataFiles/" />

  <style>

    .cont {width:150px; height:150px;  margin:20px; background: gray;

           font: 130px/150px Arial;

           text-align:center;

    }

    html>/**/body .cont img {margin-top:-12%} 

                 .cont img {vertical-align: middle}

  </style>

</head>

<body>

  <div class="cont">

    <img src="Book/00002846/KH0197_sme.jpg" />

  </div>

  <div class="cont">

    <img src="Book/00002749/K1404w.jpg" />

  </div>

  <div class="cont">

    <img src="Document/00000843/ImgLib/natoc3_digi.gif" />

  </div>

</body>

</html>