Css frage bzg zentrieren

[False]

Hey zusammen,

vorab die Seite : .....

Also wie man oben in der mitte sieht steht dort "Du bist momentan nicht eingeloggt, einloggen!".

Mein Problem ist nun, wie bekomme ich das mittig?
Aber nicht nur für meine auflösung(bzw Browsergröße) sondern für jede?

danke schonmal vorab

lg
false

[OfficialiSEVEN]

Media queries

Solltest auch mal an responsive Design denken

[Serraniel]

Dem Container wo es drin steht die volle breite geben und dann margin-left und margin-right jeweils auf auto setzen.
Edit: Zentrieren von Texten geht in CSS mit text-align: center; auf der Containerklasse.

[False]

Originally Posted by FrickXHD

Media queries

Solltest auch mal an responsive Design denken

Hast du ein Beispiel in dem Fall für meine Seite ?

Originally Posted by Serraniel

Dem Container wo es drin steht die volle breite geben und dann margin-left und margin-right jeweils auf auto setzen.
Edit: Zentrieren von Texten geht in CSS mit text-align: center; auf der Containerklasse.

Wenn ich es so mache passiert das :

[OfficialiSEVEN]

Guck dir mal Skeleton.css an die haben die Media queries schon drin da Ch gerade die meiste Zeit nur am Handy unterwegs bin ^^

[Serraniel]

Originally Posted by .ƒaℓsє.

Wenn ich es so mache passiert das :

PHP Code:

<div id="login" class="center">
  <p>Du bist momentan nicht eingeloggt, <a href="">einloggen</a>!</p>
</div> 


PHP Code:

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#login {
  color: rgba(0, 216, 255, 0.82);
  margin-top: 18px;
}

#navigation {
  margin-top: -18px;
  margin-right: 50px;
  float: right;
} 


Das zentriert das ganze. Weil ich jetzt nicht alles verbessern wollte hab ich das, was nachher dadurch depositioniert wurde auf "schnellen weg" wieder dahin gesetzt wo es hin soll.

[• Craix •]

Einfachste Methode: <center> Dein Text </center>

[False]

Originally Posted by Serraniel

PHP Code:

<div id="login" class="center">
  <p>Du bist momentan nicht eingeloggt, <a href="">einloggen</a>!</p>
</div> 


PHP Code:

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#login {
  color: rgba(0, 216, 255, 0.82);
  margin-top: 18px;
}

#navigation {
  margin-top: -18px;
  margin-right: 50px;
  float: right;
} 


Das zentriert das ganze. Weil ich jetzt nicht alles verbessern wollte hab ich das, was nachher dadurch depositioniert wurde auf "schnellen weg" wieder dahin gesetzt wo es hin soll.

Selbes Ergebnis wie ich es jetzt habe, verkleinert man die Seite geht das login nur ein wenig nach links und damit verschiebt sich das menü nach unten


vollstellen das deins sauber geschrieben ist kann ich mir nicht wirklich, glaube nicht das margin-top: -18px; korrekt ist^^

Originally Posted by FreezyTV

Einfachste Methode: <center> Dein Text </center>

dadurch würde das menü trotzdem nach unten rücken....

[Serraniel]

 Spoiler

Die Anpassung mit dem -18 war, weil sich das rechts sonst nach unten verschiebt.
Ich habe gesagt das diese Anpassung mit der -18 der schnelle Weg war (und somit nicht sauber). Es sollte nur demonstrieren wie du den Text zentrierst, Rest muss man halt selber anpassen. Noch mal nen Screen wie das aussieht....

[False]

Originally Posted by Serraniel

 Spoiler

Die Anpassung mit dem -18 war, weil sich das rechts sonst nach unten verschiebt.
Ich habe gesagt das diese Anpassung mit der -18 der schnelle Weg war (und somit nicht sauber). Es sollte nur demonstrieren wie du den Text zentrierst, Rest muss man halt selber anpassen. Noch mal nen Screen wie das aussieht....

Das Zentrieren an sich war ja nicht das Problem...
Das Problem war ja das Zentrieren und das es auch so bleibt wenn man den Browser z.b kleiner zieht...

sprich 3 divs nebeneinander und das mittlere soll immer mittig sein auch wenn man das fenster kleiner zieht.

[Serraniel]

Dann machst du einen Container mit 100% Breite, und gibst den Texten (ggf. wenn benötigt mit Containern drum herum) Klassen, welche diese platzieren.
Mit

PHP Code:

text-align: center; 


zentrierst du. Wie du weitern Text anschließend rechtsbündig darstellst, kannst du dir denken.
Willst du Container platzieren geschiet das über Margin:

PHP Code:

  margin-left: auto;
  margin-right: auto; 


zentriert Container.

PHP Code:

margin-left: 0 


ist linksbündig und

PHP Code:

margin-right: 0 


rechtsbündig. Für Abstand zum Rand dann z.B. 10px nehmen oder mit Paddings arbeiten.

[False]

Originally Posted by Serraniel

Dann machst du einen Container mit 100% Breite, und gibst den Texten (ggf. wenn benötigt mit Containern drum herum) Klassen, welche diese platzieren.
Mit

PHP Code:

text-align: center; 


zentrierst du. Wie du weitern Text anschließend rechtsbündig darstellst, kannst du dir denken.
Willst du Container platzieren geschiet das über Margin:

PHP Code:

  margin-left: auto;
  margin-right: auto; 


zentriert Container.

PHP Code:

margin-left: 0 


ist linksbündig und

PHP Code:

margin-right: 0 


rechtsbündig. Für Abstand zum Rand dann z.B. 10px nehmen oder mit Paddings arbeiten.

Genau das versuche ich doch oder nicht ?

1div für die Komplette leiste oben mit width = 100% und dann halt der login div...
gebe ich ihn nun aber marfin-left/right: auto und text-align: center, verutscht ja das menü....

[Lucky´s]

Unschöne Lösung, aber sollte momentan passen:

#login{
  color: rgba(0, 216, 255, 0.82);
  position: absolute;
  margin-top: 18px;
  width: 100%;
  text-align: center;
}

Dann bleibt die Schrift mittig und auch dein kleines "Menu" rechts rutscht dir nicht nach unten.