#1 31. August 2009 Zuletzt von einem Moderator bearbeitet: 14. April 2017 Bild zentrieren Hi@all... Ich hab da ne Photogallerie und habe die Bilder mit den beiden DIV Tags zentriert Like this: div.imageholder { position:relative; display:table; vertical-align: middle; text-align: center; float:left; width:33%; height:180px; } div.inner { width:100%; height:180px; display:table-cell; vertical-align:middle; position:relative; clear:both; } aussehen sollte es so: In dem Imageholder Div wird dann noch der Image Name ausgegeben Dummerweise klappts überall ausser beim IE7...der kennt das irgendwie nicht (Display: table und display: table-cell) und macht willkürliche sachen...kann mir jemand helfen? BW iss ehren Sache...hab jetzt 2h probiert und schaffs einfach nicht!! + Multi-Zitat Zitieren
#2 31. August 2009 AW: Bild zentrieren IE => Internet = Fail! Der InternetExplorer hängt auch hier dem Webstandart wieder nach: display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets Er kennt sämtliche display: table-... befehle nicht! + Multi-Zitat Zitieren
#3 1. September 2009 AW: Bild zentrieren Hallo, 6000Loader ich bin da deiner Meinung, dennoch ist der IE7 noch weit verbreitet... Hast du ne Idee wie man das Umbauen könnte, das es überall kompatibel ist? (IE6 nicht, aber IE7...) THX + Multi-Zitat Zitieren
#4 1. September 2009 AW: Bild zentrieren das ist doch nur ne kleine liste. wofür mit position und display arbeiten? hier mal ne einfache variante HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <style type="text/css"> #liste { width: 640px; } .imgcontainer { float: left; width: 200px; text-align: center; margin: 0 10px 10px 0; border: 1px solid #ff0000; } .img { width: 100px; height: 100px; overflow: hidden; border: 1px solid #00ff00; } </style> <body> <div id="liste"> <div class="imgcontainer"> <div class="img">IMG</div> <p>info txt</p> </div> <div class="imgcontainer"> <div class="img">IMG</div> <p>info txt</p> </div> <div class="imgcontainer"> <div class="img">IMG</div> <p>info txt</p> </div> <div class="imgcontainer"> <div class="img">IMG</div> <p>info txt</p> </div> <div class="imgcontainer"> <div class="img">IMG</div> <p>info txt</p> </div> <div class="imgcontainer"> <div class="img">IMG</div> <p>info txt</p> </div> </div> </body> </html> + Multi-Zitat Zitieren
#5 1. September 2009 AW: Bild zentrieren Ja deine Variante ist ja schön und gut...aber das kleine grüne Bild müsste horizontal und vertikal für verschiedene Bildergrössen zentriert sein...wie kannste dass den bewerkstelligen?? Bw kriegste natürlich schonmal, bist der einzige der sich hier Zeit nimmt jemandem zu helfen...THX a lot... + Multi-Zitat Zitieren
#6 2. September 2009 AW: Bild zentrieren hab das gefunden, wird dir sicher auch weiterhlefen Vertikal und horizontal zentrieren ohne Tabelle // edit hab das mal etwas bearbeitet und hier das ergbnis HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Vertikal und horizontal zentrieren ohne Tabelle</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <style type="text/css"> .img { line-height: 1em; text-align: center; padding: 40px 10px; width: 400px; float: left; border:1px solid #cacaca; } </style> <body> <p>http://www.webdesign-in.de/mts/vertikal-und-horizontal-zentrieren-ohne-tabelle/</p> <div class="img"> <img id="image535" style="vertical-align:middle;" src="http://www.webdesign-in.de/wp-content/uploads/wald.png" alt="Wald 128-128" height="10" width="196" /> </div> <div class="img"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br /> sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </body> </html> + Multi-Zitat Zitieren
#7 2. September 2009 AW: Bild zentrieren Schau mal vielleicht kann dir diese Seite weiterhelfen Vertical Centering in CSS mfg Spo0n22 + Multi-Zitat Zitieren
#8 3. September 2009 AW: Bild zentrieren die sache hat mich doch schon sehr beschäftigt. mein letzter post ist eigentlich ein totaler quatsch und muß nicht beachtet werden. bin zum ergebnis gekommen, dass wenn man alle browser beachten will ggf. auch ältere, dann gibt es kein vertikal-horizontal zentrieren mit div. ich empfehle ... - einen container mit fester größe, in dem die bilder angepasst werden - einen container mit fester größe der größere bilder mit overflow:hidden beschneidet die zwei lösung hab ich bisher verwendet. gut, weil die auflistung immer die selbe anmutung hat. also keine unterschiedlichen breiten oder höhen des containers. wenn also jemand unbedingt vertikal und horizontal zentrieren möchte, dann mach eine nicht gern gesehene tabelle. damit seit ihr sicher, dass es bei allen brwoser läuft, ohne eine ewig langen css code. oder macht das mit JS, geht auch gut. soviel zu meinen ergebnis und lösungsvorschlag + Multi-Zitat Zitieren
#9 3. September 2009 AW: Bild zentrieren Danke für die ganzen Comments, ich mach jetzt schon ne Weile CSS-Sachen aber das ist mir noch nie passiert... Also für alle die ein selbiges Problem wie ich habe, folgender Ansatz: -> Klickt auf Link von onip -> Macht gemäss Tutorial dort! -> Dann Zusätzlich das IMG Tag rausnehmen, und im innersten DIV das Bild als BackgroundURL definieren -> Link ausserhalb des Divs legen Ist kein Valid XHTML & CSS aber so funktionierts von IE6-IE8 FF, Safari, Chrome... BW's für die Bemühungen raus! + Multi-Zitat Zitieren