Zentrieren Sie einen Inhaltsblock, wenn Sie seine Breite nicht im Voraus kennen

Question

Nach vielen Versuchen und Suchen habe ich nie eine zufriedenstellende Möglichkeit gefunden, dies mit CSS2 zu tun.

Eine einfache Möglichkeit, dies zu erreichen, besteht darin, es in ein Handy einzupacken <table> wie im Beispiel unten gezeigt.Wissen Sie, wie man Tabellenlayouts und skurrile Tricks vermeidet?

table {
  margin: 0 auto;
}

<table>
  <tr>
    <td>test<br/>test</td>
  </tr>
</table>

---

Was ich wissen möchte, ist, wie man es ohne feste Breite und auch als Block macht.

Answer 1

@Jason, ja, <center> funktioniert.Gute Zeiten.Ich schlage jedoch Folgendes vor:

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}

<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

BEARBEITEN @Santi, ein Element auf Blockebene füllt die Breite des übergeordneten Containers aus, sodass dies effektiv der Fall ist width:100% und der Text fließt nach links, sodass Sie nutzloses Markup und ein nicht zentriertes Element haben.Vielleicht möchten Sie es versuchen display: inline-block;.Firefox könnte sich beschweren, aber es ist richtig.Versuchen Sie auch, a hinzuzufügen border: solid red 1px; zum CSS des .my-centered-content DIV, um zu sehen, was passiert, wenn Sie diese Dinge ausprobieren.

Answer 2

Dies wird die lahmste Antwort sein, aber es funktioniert:

Verwenden Sie das veraltete <center>-Tag.

:P

Ich habe dir gesagt, dass es lahm wäre.Aber wie gesagt, es funktioniert!

*schaudern*

Answer 3

Ich denke, dass Ihr Beispiel genauso gut funktionieren würde, wenn Sie ein <div> anstelle eines <table> verwenden würden.Der einzige Unterschied besteht darin, dass der Text in der <Tabelle> ebenfalls zentriert ist.Wenn Sie das auch möchten, fügen Sie einfach text-align hinzu:Center;Regel.

Beachten Sie außerdem, dass <div> standardmäßig den gesamten verfügbaren horizontalen Raum ausfüllt.Wenn Sie nicht sicher sind, wo es beginnt und endet, setzen Sie einen Rahmen darauf.

Answer 4

Das Folgende funktioniert gut genug.beachten Sie das Position, und die Verwendung von Auto

<div style="border: 1px solid black; 
            width: 300px; 
            height: 300px;">
            <div style="width: 150px; 
                        height: 150px; 
                        background-color: blue;
                        position: relative;
                        left: auto;
                        right: auto;
                        margin-right: auto;
                        margin-left: auto;">
             </div>
</div>

NOTIZ:Ich bin mir nicht sicher, ob es im IE funktioniert.

Answer 5

In FF3 können Sie:

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

Dies hat den Vorteil, dass jedes Element verwendet wird, das semantisch am sinnvollsten ist (ersetzen Sie ggf. das div durch etwas Besseres), aber den Nachteil, dass es im IE fehlschlägt (grr...)

Abgesehen davon ist es am besten, ohne die Breite festzulegen, Javascript zu verwenden, um den linken Rand präzise zu positionieren.Ich bin mir jedoch nicht sicher, ob Sie das als „skurrilen Trick“ bezeichnen würden.

Es hängt natürlich wirklich davon ab, was Sie tun möchten.Angesichts Ihres einfachen Testfalls ein div mit text-align:Mitte hätte genau den gleichen Effekt.

Answer 6

#wrapper {
  width: 100%;
  border: 1px solid #333;
}
#content {
  width: 200px;
  background: #0f0;
}

<div id="wrapper" align="center">
  <div id="content" align="left"> Content Here </div>
</div>