Zentrieren Sie einen Block des Inhalts, wenn Sie nicht wissen, seine Breite im Voraus

Question

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

Ein einfacher Weg, um es zu erreichen, ist es in ein handliches <table> wie im Beispiel unten gezeigt zu wickeln. Wissen Sie, wie Sie Tabellenlayouts vermeiden und auch skurrile Tricks vermeiden können?

table { 
 
    margin: 0 auto; 
 
}

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

---

Was will ich weiß, ist, wie es zu tun, ohne eine feste Breite und auch ein Block sein.

Answer 1

@ Jason, yep, <center> funktioniert. Gute Zeiten. Ich werde die folgende schlagen, aber:

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>

EDIT @Santi, ein Block-Element wird die Breite des übergeordneten Container füllen, so dass es effektiv width:100% sein wird und die Text wird auf der linken Seite fließen und Sie mit nutzlosem Markup und einem unzensierten Element belassen. Vielleicht möchten Sie versuchen display: inline-block;. Firefox könnte sich beschweren, aber it's right. Versuchen Sie außerdem, dem CSS des .my-centered-content DIV einen border: solid red 1px; hinzuzufügen, um zu sehen, was passiert, wenn Sie diese Dinge ausprobieren.

Answer 2

Das wird die lamest Antwort sein, aber es funktioniert:

Use the deprecated <center> tag.

: P

Ich habe dir gesagt, es wäre lahm. Aber, wie ich schon sagte, es funktioniert!

* Schauder *

Answer 3

Ich denke, dass Ihr Beispiel würde genauso gut funktionieren, wenn Sie eine <div> anstelle einer <Tabelle> verwenden. Der einzige Unterschied besteht darin, dass der Text in der <Tabelle> ebenfalls zentriert ist. Wenn Sie das auch wollen, fügen Sie einfach den text-align: center; Regel.

Eine andere Sache zu beachten ist, dass die <div> standardmäßig den gesamten verfügbaren horizontalen Raum füllen wird. Setzen Sie einen Rahmen, wenn Sie nicht sicher sind, wo es beginnt und endet.

Answer 4

Folgendes funktioniert gut genug. beachten Sie die 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> 

HINWEIS: nicht sicher, ob es in IE funktioniert.

Answer 5

#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>

Answer 6

In FF3 können Sie:

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

Dies hat den Vorteil der Verwendung von was auch immer Element (ersetzen Sie das div mit etwas besser, wenn erforderlich) macht die meisten semantischen Sinn hat, aber der Nachteil, dass es in IE (grr ...)

schlägt Ansonsten ist, ohne die Breite zu setzen, Ihre beste Wette, Javasc zu verwenden rippen, um die linke Kante präzise zu positionieren. Ich bin mir nicht sicher, ob Sie das als 'skurrilen Trick' einstufen würden.

Es hängt natürlich davon ab, was Sie tun möchten, natürlich. Bei einem einfachen Testfall würde ein div mit text-align: center genau denselben Effekt haben.