2010-09-27 10 views
19

Ich habe versucht:Gibt es ein CSS, das 'align = "center"' entspricht?

margin-left: auto; 
margin-right: auto; 

Aber es Mitte nicht die Elemente in meinen Tabellenzellen. Ich habe eine Kombination aus Text und <span> Elemente in der <td> s.

Sobald ich 'align = "center"' in einem der <td> Elemente eingestellt habe, zentriert es.

Wie erreiche ich das im Stylesheet?

BTW, wenn ich mache text-align: center, die für Text funktioniert. Aber nicht für andere Elemente wie <span> s.

Edit:

Die Spannweite die folgende Klasse hat, wenn das die Ausrichtung Problem betrifft:

.dot { 
    display: block; 
    width: 10px; 
    height: 10px; 
    background: #333; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
} 
+2

Hinweis: 'margin: 0 auto;' macht das Gleiche in weniger Codezeilen – jcolebrand

+0

Danke @drachenstern.Immer auf der Suche nach Möglichkeiten, unnötigen Code zu reduzieren :) – marcamillion

+0

@drachenstern: Nein, ist es nicht - Beweis: http://jsfiddle.net/pzRPA/10/ und http://jsfiddle.net/pzRPA/10/ – Crozin

Antwort

22

margin:0 auto; auf

Arbeitssatz
  • Blockebene nicht schwammen, statisch/relativ positionierte Elemente mit einer expliziten Breite
  • intrinsische Breite Elemente wie Bilder/Objekte/tables

text-align:center wird arbeiten

  • inline/Inline-Blöcke

Für Ihre Situation können Sie wahrscheinlich tun ..

#container { text-align:center; } 
#container span.block-level-spans { margin: 0 auto; } 

oder die Spannweiten innerhalb inline-block machen statt block.

EDIT:

Inline-Block: Dieser Wert bewirkt, daß ein Element zu ein Blockfeld erzeugen, das selbst als einzelne Inline-Box floß, ähnlich auf ein Element ersetzt. Das Innere von ein Inline-Block ist als Block-Box formatiert, und das Element selbst ist formatiert als ein Inline-ersetzt Element.

+0

Wonderful .... machen die Span 'Inline-Block' und Hinzufügen der Spann-Block-Level-Spannweiten-Selektor schien den Trick getan haben. Tolle! Können Sie einen Link dazu angeben, was "Block-Level-Spannen" bewirkt und warum es funktioniert? Vielen Dank. – marcamillion

+1

Es ist erwähnenswert, dass 'margin: 0 auto' im IE nicht funktioniert, es sei denn, Sie zwingen es in den (sogenannten) standardkonformen Modus, indem Sie' DOCTYPE' verwenden, was Sie ohnehin tun sollten. – cletus

+0

Ein Inline-Block ist grundsätzlich ein Inline-Element, das eine Breite/Höhe erhalten darf. Es ist fast wie ein Schwimmer, außer dass Sie sich keine Gedanken darüber machen müssen, dass es gelöscht wird. Es kann eine vertikale Ausrichtung gegeben werden. Manchmal müssen Sie "top" angeben, wenn es nicht richtig nach oben ausgerichtet ist. –

-3

ich auf Google eine schnelle Suche haben und diese gefunden:

Spannweite ist ein Inline Element und kann daher nicht ausgerichtet werden. Machen Sie es zu einem p oder div anstelle eines Bereichs, oder explizit machen Sie die Span-Block-Ebene mit display: block.

bei Gefunden: Velocity Reviews Forumn Link

+0

Weiter unten in diesem Beitrag gibt es weitere Informationen, insbesondere: text-align zentriert den Text innerhalb der Spanne. Da der Bereich nur breit wie der Text ist, hat das Zentrieren dieses Textes keinen Effekt. Um den Bereich zu zentrieren, müssen Sie text-align anwenden: center; zu was auch immer Block Level-Element ist die Parent Elternteil. – PatrickV

+0

ÜBERPRÜFUNG von Posts niedriger Qualität: Nein! Referenzierte Diskussion ist von 2005. CSS erlaubt es Ihnen, das Aussehen von Elementen heutzutage völlig zu verändern. – ElmoVanKielmo

Verwandte Themen