Zum Inhalt springen

div - Element mittig ausrichten, aber wie?

Wiesel

Von Wiesel
in Webdesign

 Teilen

Empfohlene Beiträge

Wiesel

Wiesel

Geschrieben
Geschrieben

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

baba007

Geschrieben
Geschrieben
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.

Krain

Krain

Geschrieben
Geschrieben

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

SweetestAngel

Geschrieben
Geschrieben

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

Wiesel

Geschrieben
  • Autor
Geschrieben
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!!!

Wiesel

Wiesel

Geschrieben
  • Autor
Geschrieben
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

kills

Geschrieben
Geschrieben

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

etreu

etreu

Geschrieben
Geschrieben

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

FMG

Geschrieben
Geschrieben
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

SweetestAngel

Geschrieben
Geschrieben

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

geloescht_JesterDay

Geschrieben
Geschrieben

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

kills

Geschrieben
Geschrieben

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

geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben
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

etreu

Geschrieben
Geschrieben

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 ;-)

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...