div - Element mittig ausrichten, aber wie?

Wiesel · 1. Juli 2005

Hi,

ich möchste ein div-element mittig auf meinem Bildschirm zentrieren.

Im Prinzip ist das kein Problem sprich mit "margin-left:auto" und "margin-right:auto".

Jetzt will ich das div-element aber nicht nur links/rechts mittig haben sondern auch oben/unten mittig sprich also wierklich gesamt mittig haben.

Man könnte meinen das funktioniert mit "margin-top:auto" und "margin-bottom:auto", aber das tut es leider nicht.

kann mir da jemand weiterhelfen?

baba007 · 1. Juli 2005

Hi,

ich möchste ein div-element mittig auf meinem Bildschirm zentrieren.
Im Prinzip ist das kein Problem sprich mit "margin-left:auto" und "margin-right:auto".
Jetzt will ich das div-element aber nicht nur links/rechts mittig haben sondern auch oben/unten mittig sprich also wierklich gesamt mittig haben.
Man könnte meinen das funktioniert mit "margin-top:auto" und "margin-bottom:auto", aber das tut es leider nicht.

kann mir da jemand weiterhelfen?

entweder frame :

<frame src="URL" name="Name"

marginwidth="pixelabstand/%" marginheight="pixelabstand/%">

oder

tabelle.

Wiesel · 1. Juli 2005

das muss auch ohne gehen und zwar nur mit div...

CyberDemon · 1. Juli 2005

Schon mit align="center" und valign="middle" experimentiert?

Krain · 1. Juli 2005

Da eine Höhenangabe im body mit CSS nicht möglich ist wird es wohl nicht funktionieren, außer du liest vorher mit JavaScript die Bildschirmhöhe und Breite aus und positionierst das DIV dann absolut.

Ich lasse mich gerne eines besseren belehren, falls es doch eine Möglichkeit gibt.

SweetestAngel · 1. Juli 2005

mach's dir doch nicht so kompliziert ... also ich würde dies hier machen:


<table width="100%" height="100% border="0" cellspacing="0" cellpadding="0">

<tr>

<td><div align="center">Guten Morgen</div></td>

</tr>

</table>

die einfachste möglichkeit halt

Wiesel · 1. Juli 2005

mach's dir doch nicht so kompliziert ... also ich würde dies hier machen:
<table width="100%" height="100% border="0" cellspacing="0" cellpadding="0">

<tr>

<td><div align="center">Guten Morgen</div></td>

</tr>

</table>
die einfachste möglichkeit halt

Ich will nicht den inhalt des div mittig ausrichten sondern das div selbst!!!

SweetestAngel · 1. Juli 2005

ja und was haste da drin im div?? ist doch egal ... damit haste es jedenfalls mittig ausgerichtet ...

Wiesel · 1. Juli 2005

ja und was haste da drin im div?? ist doch egal ... damit haste es jedenfalls mittig ausgerichtet ...

häh????

nochmal, ich will nicht den inhalt eines div elements mittig ausrichten!

ein div element soll wie oben beschrieben mitte/mitte angezeigt werden, vergiss den inhalt...

kills · 1. Juli 2005

Hi,


<body style="width:100%">

  <div style="width:100%">

    <div style="margin: auto; border: 1px solid black;">Ich bin zentriert!</div>

  </div>

</body>

ungetestet!

Gruß,

Markus

Manitu71 · 1. Juli 2005

margin:auto läuft aber leider beim IE nur in der 6er. Sonst dürfte es überall klappen, wenn man noch mal vom NN 4 absieht

etreu · 1. Juli 2005

Wie wäre es denn mit :


div.mitte {

  position:absolute;

  width: xx%;

  height: yy%;

  left: (100 - xx) / 2 - borderbreite;

  top: (100 - yy) / 2 - borderbreite;

  overflow: auto;

}

ANMERKUNG: natürlich stehen im Style nicht die Formeln, sondern deren Ergebnisse.

FMG · 1. Juli 2005

Man könnte meinen das funktioniert mit "margin-top:auto" und "margin-bottom:auto", aber das tut es leider nicht.

Richtig, denn margin-top/margin-bottom: auto; entspricht margin-bottom/margin-top: 0;.

Wenn das div absolute Werte besitzt, kannst du es _nur_ mit einer äußeren Tabelle komplett in der Mitte ausrichten. Anders wärs, wenn das div eine prozentuale Breiten-/Höhenangabe hätte, denn dann könnte man es ohne Tabelle ausrichten.

Grundgerüst für die Tabelle:

<table width="99%" height="99%" border="0">

<tr>

 <td valign="top" align="center"><!-- hier kommt dann dein div hin --></td>

</tr>

</table>

Mit varablen Breiten siehe http://www.1ngo.de/web/zentrierung.html (vorletztes Beispiel).

SweetestAngel · 2. Juli 2005

mein reden ... ^^ sorry, dass ich das div davor geschrieben hatte ... kann man natürlich auch so machen, müsste man aber auch selbst wissen (davon bin ich ausgegangen)

ich bin auch der meinung, dass man es nur mit hilfe einer tabelle wirklich mittig bekommt ...

geloescht_JesterDay · 4. Juli 2005

Jetzt will ich das div-element aber nicht nur links/rechts mittig haben sondern auch oben/unten mittig...

kann mir da jemand weiterhelfen?

Nein, ausser mit den Tabellenmethoden. Der Grund: HTML hat keine Begrenzung nach unten. Aus diesem Grund ist auch ein <div style="height:100%"> nicht möglich (ausser im IE, und da nur im Quirks-Modus). Das was du im Browser siehst, also den Rand unten, ist ja nicht der untere Rand des HTML-Dokuments (auf das sich deine Formatierung bezieht..

Es gibt einen "Trick" das dennoch hinzubekommen, indem du im CSS für das Tag <html> und für das Tag <body> (glaube brauchst beide) je eine Höhe von 100% vorgibst. Dann sollte auch eine div Höhe 100% gehen (margin-top etc wohl auch). Das geht auch soweit ganz gut, allerdings hast du dann Probleme, sobald du deine Seite nach unten scrollen willst, dann stimmt der Hintergrund (z.B.) nicht mehr. du benutzt dazu nämlich nur den Viewport, also die aktuelle Anzeige. und sobald du diese verschiebst... naja, verschiebst du halt alles.

EDIT:

Bleibt zu hoffen, dass sich mit CSS3 da etwas tut... und dann noch, dass das auch von den Browsern entsprechend schnell umgesetzt wird.

kills · 4. Juli 2005

EDIT:
Bleibt zu hoffen, dass sich mit CSS3 da etwas tut... und dann noch, dass das auch von den Browsern entsprechend schnell umgesetzt wird.

Hi,

Mir würde vorerst reichen, dass der IE das DOM Modell, CSS1 & CSS2 richitg interpretiert, dann wäre mir schon sehr geholfen...

Gruß,

Markus

etreu · 4. Juli 2005

Und was soll denn mit meiner Lösong nich funktionieren?

geloescht_JesterDay · 4. Juli 2005

Und was soll denn mit meiner Lösong nich funktionieren?

height: yy%;

Da müsste dann ja wohl 100% stehen, es gibt aber keine 100% Höhe. Ausserdem müsste dass dann über Javascript angepasst werden, sonst würde eine Änderung an der Fenstergröße nicht mitgemacht werden. Und ausserdem sollte man absolute Positionierung so gut es geht vermeiden... (genau wie Layout-Tabellen).

Hab das grad dennoch mal probiert... mit HTML 4.01 Transitional stellt mein FF 1.0.4 das hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

  </head>

  <body>

      <div style="border: 1px solid black; height: 100%";>Test</div>

  </body>

</html>

[/php]
Mit 100% Höhe dar... XHTML aber dann wieder nicht. Was für eine HTML Version hast du bei der Seite genutzt?

etreu · 5. Juli 2005

Ich benutze xhtml1-strict.

Ein funktionierendes Beispiel ist meine Webseite. Die CSS-Datei steht unter style/v1.css .

So weit ich weiss funktioniert die Seite mit IE, Mozilla (+Derivate), Opera, Safari und den meisten Palm-Browsern. Achja, und Lynx ;-)

Anmelden

div - Element mittig ausrichten, aber wie?

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte