Einfach ein Objekt zentrieren mit CSS und keine Hacks

Question

Ich möchte ein Objekt mit CSS und keine Hacks zentrieren, ist das möglich und wie?

Ich habe das versucht, aber als mein P-Tag ist weg.

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
} 

Answer 1

Es gibt mehrere Möglichkeiten, ein Element zu zentrieren. Aber es hängt davon ab, was Ihr Element ist und wie wir wählen, um es anzuzeigen:

• Wenn Sie {display:inline; }

  Das ist einfach. Sie können einfach "text-align: center;" um Text, Bilder und divs zu zentrieren.

• Wenn Sie {display:block;}

  haben Dies ist ein bisschen schwieriger. Es hängt davon ab, wie Ihr Objekt positioniert ist. Ihr Objekt könnte relativ, absolut oder fest sein.

  • Wenn es relativ ist; dann können Sie "margin:0 auto;" verwenden, jedoch benötigen Sie einen Breitenwert. Wenn es absolut positioniert ist, müssen Sie Ihre "top:" und "left:" Werte angeben. Sie benötigen auch eine Breite. Wenn Sie die Breite des Elements kennen, verwenden Sie am besten {left:50%; margin-left:-X}, wobei X = 1/2 der Breite des Elements ist.

Answer 2

Verwenden margin: auto wie folgt aus:

margin: 0px auto 

Answer 3

HTML:

<div>Centered</div> 

CSS:

div { 
    margin: 0 auto; 
    width: 200px; 
} 

anschauliches Beispiel: http://jsfiddle.net/v3WL5/

Beachten Sie, dass margin: 0 auto; nur dann wirksam wird, wenn div eine Breite hat.

Answer 4

wenn Sie nicht brauchen Lage sein: fixed; Verwenden Sie nur

<center> 
Hello 
</center> 

Das in HTML5 ist veraltet

Answer 5

Verbrauch:

1. In-Line Nutzung: Inhalt geht hier ....

2. CSS-Code:

   #text-align { text-align:center }

HTML-Code:

<div id="text-align">Content goes here....</div>

http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx

Answer 6

verwenden für allgemeine Zwecke. Even span oder div, die in was auch immer ist:

width:inherit; display:block;margin:0 auto;