# Bild in der Mitte der Seite?



## online (22. Juli 2004)

Hallo, hab gerade vergebens versucht ein bild komplett zentriert auszurichten, sowohl an der x - Achse, als auch an der y - Achse!

Es funktioniert, dass es in der Mitte (von Links nach rechts) ist, aber nicht in der Mitte (von Oben nach unten)!
Kann mir bitte jemand erklären, wie ich das schafen kann?

Danke

Online


----------



## therealcharlie (22. Juli 2004)

mit html gar nicht. mit php sollte es eigentlich so gehen: 
+seitenhöhe abfragen
+höhe des bildes subtrahieren
+wert durch 2 teilen
+diesen dann als wert für top-marign einsetzen.


----------



## SilentWarrior (22. Juli 2004)

```
<table width="100%" height="100%" border="0">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<img src="...">
</td>
</tr>
</table>
```


----------



## mini_xs (22. Juli 2004)

> _Original geschrieben von therealcharlie _
> *mit html gar nicht. mit php sollte es eigentlich so gehen:
> +seitenhöhe abfragen
> +höhe des bildes subtrahieren
> ...



Will es nur kurz erwähnen, aber mit php kann man die Seitenhöhe nicht abfragen.
SilentWarriors Lösung funktioniert bestens, ist aber nicht HTML Standart.

Edit: Das mit dem height beanstanden ist vielleicht (oder warscheinlich) etwas kleinlich.

Würde es also lieber per CSS lösen.
Hier gibt es Ansätze:
css.fractatulum.net

Viele Grüße,

Stefan


----------



## online (22. Juli 2004)

Danke!
Aber irgendwie funktioniert das alles nicht!

Hier mal mein Code:


```
<style type="text/css">
body {
	background-color: #131c47;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style></head>

<body scroll="no" valign="middle" align="center">
<table width="100%" height="100%"  border="0" align="center" cellpadding="0" cellspacing="0" valign="middle">
  <tr>
    <td valign="middle" align="center"><div align="center" valign="middle"><img src="image/impressum.gif" width="753" height="403" border="0" usemap="#Map" align="center" valign="middle">
          <map name="Map">
            <area shape="rect" coords="127,14,284,64" href="test.htm" target="_self">
            <area shape="rect" coords="316,46,407,70" href="bewertung.htm" target="_self">
            <area shape="rect" coords="436,44,513,72" href="lagerung.htm" target="_self">
            <area shape="rect" coords="541,44,639,71" href="impressum.htm" target="_self">
            <area shape="rect" coords="5,384,138,400" href="hallo.htm" target="_blank">
          </map>
    </div></td>
  </tr>
</table>
```


----------



## mini_xs (22. Juli 2004)

Habe gerade nochmal geschaut und es gibt anscheinend keine wirklich gute Lösung.
Aber das von dir gepostete Stück funktioniert bei mir unter Firefox und IE 6 bestens.

Edit: Noch ein Tipp. Mit 
	overflow: hidden;
im CSS werden die scrollbalken auch im Firefox/Mozilla nicht dargestellt.

Viele Grüße,

Stefan


----------



## Quaese (22. Juli 2004)

Hi,

eine Möglichkeit der Zentrierung besteht noch mit CSS. Du solltest zuvor sicherstellen,
dass Dein Anzeigebereich und der Body tatsächlich 100% betragen. Anschliessend
kann das Zentrieren erfolgen.

```
/* 100% Anzeigebereich gewährleisten */
body, html{ height: 100%;
            width: 100%;}

/* Zentrieren */
img.zentriert{ position: absolute;
               left: 50%;
               margin-left: -376px;  /* Halbe Breite des Bildes */
               top: 50%;
               margin-top: -201px;   /* Halbe Höhe des Bildes */}
```
Der zugehörige HTML-Code:

```
<img class="zentriert" src="image/impressum.gif" width="753" height="403" border="0" usemap="#Map">
```
Ciao
Quaese


----------



## SilentWarrior (22. Juli 2004)

> SilentWarriors Lösung funktioniert bestens, ist aber nicht HTML Standart.


Das weiss ich, aber da rund 90% aller HTML-Coder ohnehin nur irgendwelchen Pfuschercode schreiben, den der IE mit etwas Glück noch richtig interpretiert, habe ich gedacht, es interessiert sowieso keinen, ob das valides HTML ist oder nicht. Naja, aber ich freue mich, dass es doch einer gemerkt hat.


----------



## mini_xs (23. Juli 2004)

> _Original geschrieben von SilentWarrior _
> *Das weiss ich, aber da rund 90% aller HTML-Coder ohnehin nur irgendwelchen Pfuschercode schreiben, den der IE mit etwas Glück noch richtig interpretiert, habe ich gedacht, es interessiert sowieso keinen, ob das valides HTML ist oder nicht. Naja, aber ich freue mich, dass es doch einer gemerkt hat.  *



Ich schau danach, versuchs und lass es dann.
Es ist einfach zu ermüdend, aber der Gedanke mit validem HTML Seiten zu erstellen die so aussehen wie sie sollen hat was.
Aber leider ist das Ergebniss meistens nicht oder nur mit viel Trickserei zu gebrauchen.

Viele Grüße,

Stefan


----------

