CSS Zentrieren Tricks [geschlossen]

StackOverflow https://stackoverflow.com/questions/148251

Frage

Meine Lieblings Gleichung ein XHTML-Element zum Zentrieren nur mit CSS ist wie folgt: 

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

Es gibt auch die einfachere margin: auto-Methode in Browsern, die sie unterstützen. Hat jemand knifflige Möglichkeiten haben zu zwingen Inhalt in seinen Behälter zentriert angezeigt werden? (Bonuspunkte für die vertikale Zentrierung)

Bearbeiten - oops, vergessen, den 'negativen' Teil eines in dem margin-left. festgelegt.

War es hilfreich?

Lösung

Stick mit margin: 0 auto; zur horizontalen Ausrichtung; Wenn Sie die vertikale Ausrichtung als auch Gebrauchsstellung benötigen: absolute; obere: 50%; margin-top: - (Breite / 2) Pixel; Beachten Sie jedoch, wenn Ihr Behälter mehr Breite als den Bildschirm, ein Teil davon wird fallen außerhalb des Bildschirms auf der linken Seite mit der Position hat. Absolute Methode

Andere Tipps

div #centered{
 margin: 0 auto;
}

scheint die zuverlässigste aus meiner Erfahrung zu sein.

Nun, das wie massiv übertrieben scheint, ich muß sagen. Ich neige dazu, den Behälter zu setzen für alten Browser, text-align:center; für modernen Browser margin:auto;, und lassen Sie es so. Dann zurückgesetzt text-align in dem Element (falls es sich um Text enthält).

Natürlich müssen Einstellung einige Dinge wie Block und Breite müssen Einstellung ... Aber was auf der Erde versuchen Sie zu Stil, der muss, dass viel Hacking um? 

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Margin. Auto in allen Browsern funktioniert, solange Sie sicherstellen, IE im Standardmodus ist

Es ist mehr wählerisch als andere und erfordert Ihre Doctype des ersten in Ihrem Dokument zu sein, die keine Leerzeichen bedeuten (Leerzeichen, Tabulatoren oder Zeilenumbrüche), bevor es.

Wenn Sie das tun, margin: auto ist der Weg zu gehen! :)

Nur eine Anmerkung, dass der Marge: auto; Methode funktioniert nur, wenn der Browser die Breite des Elements berechnen kann, der übergeordneten Container zentriert und die Breite werden. in vielen Fällen einstellen width: auto; funktioniert, aber in einigen nicht.

Dies ist ein praktischen Lesezeichen für CSS Tricks

http://css-discuss.incutio.com/

viele von Zentrieren Tricks zu.

Die absolute Positionierung mit 50% Ansatz hat den schweren Nebeneffekt, dass, wenn das Browserfenster schmaler als das Element ist dann einen Teil des Inhalts aus der linken Seite des Browsers erscheint -. Ohne die Möglichkeit, es zu blättern

Halten Sie

zu Autopannen -. Sie sind weitaus zuverlässiger

Wenn Sie arbeiten in Standard-Modus (die Sie sollten), dann werden sie in allen Browsern unterstützt Sie wahrscheinlich kümmern.

Sie können den Text-align Hack verwenden, wenn Sie wirklich Internet Explorer 5.5 und früher unterstützen müssen. 

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Das funktioniert gut in allen gängigen Browsern. Wie bereits erwähnt margin: 0 auto; wird in allen halb aktuellen Versionen von IE nicht funktionieren.

Versuchen Sie dies; weiß nicht, ob es in IE funktioniert, funktioniert jedoch in Fx in Ordnung. Es konzentriert sich ein DIV-Block auf der Seite nur mit CSS (kein JavaScript), kein margin-Auto und der Text innerhalb des DIV-Block ausgerichtet ist noch übrig. Ich versuche nur, um herauszufinden, ob vertikale Zentrierung auf diese Weise funktionieren kann, auch, aber bisher ohne Erfolg. 

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top