centrera bild i div (både våg och lod)

6 svar · 651 visningar · startad av doggelito 3 juni 2003

doggelitoMedlem sedan juni 20003 076 inlägg

Frågan3 juni 2003 17:18#1

kan man skriva om denna så man slipper tabellen utan att det blir jätte många divar?
bilden ska alltså hamna i mitten av diven, både lodrätt och vågrätt.

      <div class="h5" style="float:left; width:180px; height:188px; text-align:center; background-color:#ffffff; border:1px solid #323232;">
	 	 <table style="height:100%; width:100%;"><tr><td align="center" valign="middle">
	 		 <img src="<%= "/admin/images/image.asp?Folderpath=" & Folderpath & "&Scale=1&Scalesize=160" %>">
	 	 </td></tr></table>
	  </div>

mikkeXMedlem sedan aug. 2002477 inlägg

3 juni 2003 20:29#2

Kommer bilden alltid att vara lika stor?

doggelitoMedlem sedan juni 20003 076 inlägg

4 juni 2003 05:57#3

nej, bildens storlek varierar. :)

erreMedlem sedan maj 20001 215 inlägg

4 juni 2003 06:41#4

margin: auto;

Funkar i mozilla och andra kompetenta webbläsare, tyvärr ej IE.

doggelitoMedlem sedan juni 20003 076 inlägg

4 juni 2003 06:47#5

verkar som man får fortsätta med att använda tabeller då!
varför i hela fridens namn finns det inte en variant av valign i css för???

higaMedlem sedan aug. 2000359 inlägg

4 juni 2003 07:26#6

Jag hade för mig att CSS3 kommer att ha en del nyttiga grejer, men det finns en CSS2-lösning också:
Kör med två divor, sätt display:table; height: 188px på den yttre och display:table-cell; vertical-align: middle; height: 188px; på den inre.

mikkeXMedlem sedan aug. 2002477 inlägg

4 juni 2003 07:52#7

Inte behöver du tabeller...
En väg att gå är att lägga bilden som bakgrund:

<div style="width: 400px; height: 400px;border: 1px solid red;background:url(bilder/mark_x.png) no-repeat center center"></div>