Wie wird ein schwebendes Element variabler Breite horizontal zentriert?

Wie kann ein schwebendes Element variabler Breite horizontal zentriert werden?Wie wird ein schwebendes Element variabler Breite horizontal zentriert?

Edit: Ich habe bereits dies mit einem div für das schwimmende Element arbeiten und eine width für den Container (dann verwenden Sie margin: 0 auto; für den Container). Ich wollte nur wissen, ob es möglich ist, ein containing-Element zu verwenden oder zumindest ohne width für das enthaltende Element anzugeben.

Quelle

2009-08-05 Waleed Eissa

Wenn Sie es zentrieren, warum ist es floated? – You

es ist eine lange Geschichte, ich schwimme es aus anderen Gründen –

mögliche Duplikate von [** Wie float Elemente? **] (http://stackoverflow.com/questions/4767971/how-to-center-float (Elemente) – arnaud576875

Sagen Sie bitte eine DIV haben Sie wollen horizontal zentriert:

<div id="foo">Lorem ipsum</div>

Im CSS würden Sie stylen es mit diesem:

#foo 
{ 
    margin:0 auto; 
    width:30%; 
}

Welche, dass Sie einen oberen und unteren Rand haben Staaten von Null Pixel, und entweder links oder rechts, automatisch berechnen, wie viel ist erforderlich, um gerade zu sein.

Es ist nicht wirklich wichtig, was Sie für die Breite eingeben, solange es da ist und nicht 100% ist. Sonst würden Sie nichts in die Mitte setzen.

Aber wenn Sie es schweben lassen, links oder rechts, dann sind die Wetten deaktiviert, da es aus dem normalen Fluss der Elemente auf der Seite entfernt und die automatische Randeinstellung nicht funktioniert.

Quelle

2009-08-05 09:31:43 random

Das einzige Problem hier ist, dass Sie explizit die Breite festlegen müssen; 'width: auto;' funktioniert nicht (AFAIK). – You

Richtig, Sie müssen etwas als Breite einstellen. Aber die Frage war die Variable Breite, hoffentlich ist das kein anderes Wort für Auto und stattdessen einige schwankende Wert oder relativen Betrag, wie em oder% – random

Danke für Ihre Antwort, eigentlich habe ich kein Problem mit Zentrierelementen, was ich ' Ich versuche zu zentrieren ein "schwebendes Element". Ich weiß, das ist in CSS nicht möglich, aber ich hatte gehofft, jemand könnte einen Hack haben, der dafür arbeiten kann, ich habe sogar versucht, einen Tisch zu benutzen, aber das hat nicht funktioniert. Leider gibt es in meinem Szenario keine Möglichkeit, das Element nicht zu floaten, ich brauche das aus bestimmten Gründen. –

das Element Unter der Annahme, das schwimmt und wird zentriert ist ein div mit einem id="content" ...

<body> 
<div id="wrap"> 
    <div id="content"> 
    This will be centered 
    </div> 
</div> 
</body>

Und die folgende CSS anwenden:

#wrap { 
    float: left; 
    position: relative; 
    left: 50%; 
} 

#content { 
    float: left; 
    position: relative; 
    left: -50%; 
}

Hier ist eine gute reference in Bezug auf das.

Quelle

2009-08-05 10:06:50 Leyu

Danke, ich werde mir das ansehen –

Sie können auch 'margin-left' anstelle von' left' und 'position: relative' versuchen. Margin-left hat für mich am -50% Element gearbeitet. – Muhd

ja - aber was ist der Mehrwert @muhd? – marcusklaas

Können Sie nicht einfach display: inline block und align zu center verwenden?

Example.

Quelle

2011-05-07 19:46:44 Kai

Nichts in deiner Geige ist schwebend ... – Muhd

.center { 
    display: table; 
    margin: auto; 
}

Quelle

2012-04-10 22:54:48

das hat für mich viel besser funktioniert als die angenommene Antwort, probier beides! –

Ich bevorzuge diese Methode auch besser, aber es funktioniert auf IE8 +, also wenn Sie IE7 benötigen, sollten Sie die akzeptierte Antwort verwenden. – isapir

Danke - hat meine Zeit gerettet, wirklich! – Rossitten

können Sie fit-content Wert für width verwenden.

#wrap { 
    width: -moz-fit-content; 
    width: -webkit-fit-content; 
    width: fit-content; 
    margin: auto; 
}

Hinweis: Es funktioniert nur in den neuesten Browsern.

Quelle

2013-08-13 10:17:22

Die beliebte Antwort hier funktioniert manchmal, aber manchmal schafft es horizontale Bildlaufleisten, die schwer zu bewältigen sind - vor allem, wenn es um breite horizontale Navigationen und große Pull-Down-Menüs geht. Hier ist eine noch leichtere Version, die diese Grenzfälle zu vermeiden hilft:

#wrap { 
    float: right; 
    position: relative; 
    left: -50%; 
} 
#content { 
    left: 50%; 
    position: relative; 
}

Proof that it is working!

Um genauer Ihre Frage zu beantworten, ist es wahrscheinlich nicht möglich, ohne zu tun, einige enthalten Element einrichten, es jedoch ist sehr gut möglich ohne Angabe eines Breitenwertes. Hoffe, dass jemand da draußen einige Kopfschmerzen erspart!

Quelle

2014-04-15 21:49:20 fohryan

Dies funktioniert besser, wenn die ID = Container (die das äußere Div ist) und ID = enthalten (das ist das innere Div). Das Problem mit der unten empfohlenen Lösung ist, dass es in manchen Fällen zu einer horizontalen Scroll-Leiste führt, wenn der Browser versucht, das linke -50% Attribut zu berücksichtigen. There is a good reference für diese Lösung

 #container { 
      text-align: center; 
     } 
     #contained { 
      text-align: left; 
      display: inline-block; 
     }

Quelle

2014-11-24 11:47:08

Wie wird ein schwebendes Element variabler Breite horizontal zentriert?

Antwort

Verwandte Themen