Div's zentrieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
auto
boxen
code
dank
definition
display
farbe
fenster
inhalt
krieg
mache
mitte
notwendig text
radius
tag
text
url
weglassen
zugang
-
Ich habe ein login feld erstellt und es sah recht einfach aus, nun wollte ich es mit runden ecken und tag/farbe">farbe aufpeppen und sieht auch gut aus aber ich kriege den div container nicht in die mitte meines bildschirmes!
der code:
<body> <div id="content_rund"> <h2>Chat Zugang</h2> <p>Bitte füllen sie das Formular aus und senden sie es ab.<br /> Wenn der Benutzername und das Passwort richtig waren, werden sie automatisch zum Chat weitergeleitet.</p> <form action="auswerten.php" method="post"> <p>Benutzer: <input name="ben"/></p> <p>Passwort: <input type="password" name="pw"/></p> <p><input type="submit" value="Einloggen"/></p> </form> </div> </body>
und das stylesheet dazu:
html, body{ text-align: center; } #content_rund{ height: 500px; width: 500px; background-color: #800000; color: #FFFFFF; moz-border-radius: 25px; border-radius: 25px; }
brauche mal eure hilfe, danke!
EDIT:
ich habe jetz das ganze mit
margin-left: 400px;
gelöst aber ich denke dann ist es nur für mich zentriert, da andere einen größeren desktop haben.
Kennt wer eine andere lösung?
Beitrag zuletzt geändert: 26.8.2012 16:16:41 von browsergame-entwickler -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ggamee schrieb:
HTML Tag:<center><div> blahblah </div></center>
Liebe Grüße
das einfachste auf der welt :D
danke hab garnet dran gedacht :D -
Ich glaub viele haun mich auch dafür, dass ich das Tag empfehle bzw benutze, weil viele es nicht mögen. Sowas macht man mit CSS, aber ich weiß nicht warum. Das ist einfach und schnell, und genau das, was man oft braucht.
Vergiss im CSS den text-align:left; nicht
sonst ist dein Text bzw inhalt auch Zentriert.
Liebe Grüße -
der soll ja zentriert werden!
-
#content-rund {margin: 0 auto;}
zentriert ebenfalls und niemand meckert, auch niccht der Validator.
<center> ist seit HTML4 ein deprecated Tag
Beitrag zuletzt geändert: 26.8.2012 17:13:30 von fatfreddy -
Hallo
setze einfach um das div noch ein div (wrapper) mit text-align:center;
und mach in der CSS dazu margin: 0 auto; in Deinem content_rund
HTML:
<body> <div id="wrapper"> <div id="content_rund"> <h2>Chat Zugang</h2> ... </div> </div> </body>
CSS:
#wrapper { text-align: center; } #content_rund { margin: 0 auto; height: 500px; width: 500px; background-color: #800000; color: #FFFFFF; moz-border-radius: 25px; border-radius: 25px; }
das
ist wichtig, vorallem das "auto" darin,margin: 0 auto;
damit der Außen-Abstand automatisch angepasst wird und somit Dein content_rund in der Mitte steht
also nochmal ein Beispiel mit direkter CSS-Style Definition:
<div style="text-align:center;"> <div style="margin: 0 auto; padding:8px; width:550px; height:230px; background:#003366; color:#FFFFFF;"> <h3>Titel</h3> <p style="text-align:left;">Text bla bla </p> <p>weiterers <strong>HTML</strong> in der Box </p> </div> </div>
wie fatfreddy schon schrieb: das margin: 0 auto; ist wichtig
wenn mann eine Box (DIV) innerhalb einer anderen Ebene (body oder div) zentrieren will ...
Du kannst also auch den "wrapper" DIV weglassen und im body das text-align:center; machen
das klappt auch, solange du für Dein "content_rund " das
im CSS hastmargin: 0 auto;
:)
Beitrag zuletzt geändert: 26.8.2012 17:27:20 von tela -
okey danke für die antwort mache es aber einfach mit dem center befhel ;)
-
browsergame-entwickler schrieb:
okey danke für die antwort mache es aber einfach mit dem center befhel ;)
Warum nicht sofort richtig? Sich veraltete Lösungen anzugewöhnen, ist keine gute Idee.
tela schrieb:
Du kannst also auch den "wrapper" DIV weglassen und im body das text-align:center; machen
das klappt auch, solange du für Dein "content_rund " das
im CSS hastmargin: 0 auto;
Weder der Wrapper noch das text-align sind notwendig. text-align:center ist sogar nachteilig, da sich diese Eigenschaft verwerbt und die Inhalte aller Kindelemente auch zentriert würden.
Beitrag zuletzt geändert: 26.8.2012 19:04:20 von fatfreddy -
eins noch...
wenn du etwas sowohl horizontal als aus vertikal relativ zur fenster- bzw. elternelemt-größe zentrieren willst und das möglichst valide, semantisch nicht inkorrekt, suchmaschinenoptimiert, browserkonform und ohne auf aktiviertes javascript angewiesen zu sein, empfehle ich den einsatz eines html-div-konstrukts das eine tabellenstruktur nachahmt z.B.:
<div class="mittig"> <div> <div> zu_zentrierender_inhalt </div> </div> </div>
zusammen mit dem css
.mittig { display:table; width:100%; height:100%; } .mittig > div { display:table-row; } .mittig > div > div { display:table-cell; vertical-align:middle; text-align:center; }
ergiebt das ein element dessen weiterer inhalt horizontal und vertikal zentriert ist und das du wie eine html-tabelle auszeichnen kannst, also auch mit beliebigem text-align und vertical-align einer tabellenzelle (s.o.). -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
