Centrera allt innehåll i en div i FF?

13 svar · 940 visningar · startad av aasah 26 feb. 2007

aasahMedlem sedan mars 20034 471 inlägg

Frågan26 feb. 2007 15:37#1

Jag har en div som innehåller en knapp, lite text, ett inputfält och en tabell. När jag definierar följande i CSS:

#cw {
  font-family: 'Times New Roman', sans-serif;
  font-size: 12px;
  width: 60%;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

så blir hela innehållet snyggt centrerat i IE (v 6 i alla fall). I FF hamnar däremot allt innehåll snyggt centrerat utom tabellen. x( Hur löser jag smidigast problemet så det blir centrerat i både FF och IE??? :q

Sidan i fråga.

OkkidoMedlem sedan maj 20007 492 inlägg

26 feb. 2007 15:55#2

margin:0 auto;

Mindre/Utan shorthand:
(margin: 0 auto 0 auto;)
(margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;)

aasahMedlem sedan mars 20034 471 inlägg

26 feb. 2007 16:12#3

Okkido skrev:

margin:0 auto;

Mindre/Utan shorthand:
(margin: 0 auto 0 auto;)
(margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;)

Var ska den koden ligga? I diven? Eller i tabellen i diven?

Varför funkar inte center?

OkkidoMedlem sedan maj 20007 492 inlägg

26 feb. 2007 16:25#4

#cw {
font-family: 'Times New Roman', sans-serif;
font-size: 12px;
width: 60%;
margin: 5px;
padding: 10px;
text-align: center;
margin:0 auto;
}

aasahMedlem sedan mars 20034 471 inlägg

26 feb. 2007 16:30#5

Gör ingen som helst nytta. Ser precis likadant ut i FF.

headbugMedlem sedan sep. 2006867 inlägg

26 feb. 2007 16:59#6

.cwColumn {
/*width: 45%;*/
height: 600px;
margin-right: 20px;
overflow:auto;
float:left;
}

float: left tar ut diven ur normala flödet. FF gör rätt och IE (såklart) fel! :)

aasahMedlem sedan mars 20034 471 inlägg

26 feb. 2007 17:28#7

headbug skrev:

float: left tar ut diven ur normala flödet. FF gör rätt och IE (såklart) fel! :)

VA? :q Det är inte DIVEN som ska centreras, det är INNEHÅLLET i den!!!

tantenMedlem sedan nov. 20051 596 inlägg

26 feb. 2007 18:05#8

Du kan nog lägga till margin:0 auto;
i #cw table också. Tabeller kan leva lite egna liv :-)

OkkidoMedlem sedan maj 20007 492 inlägg

26 feb. 2007 18:44#9

aasah skrev:

Gör ingen som helst nytta. Ser precis likadant ut i FF.

funkade bra för mig, men då måste jag missupfattat vad du menade.

zcorpanMedlem sedan dec. 20042 245 inlägg

26 feb. 2007 19:42#10

tanten skrev:

Du kan nog lägga till margin:0 auto;
i #cw table också.

Precis. Eller bara på tabellen räcker.

headbugMedlem sedan sep. 2006867 inlägg

26 feb. 2007 22:05#11

Jag blev lite förvirrad jag med, text-align: center gäller INNE i diven, medan margin: 0 auto; gäller utanför. Alltså för att centrera något innehåll i #cw måste innanmätet, dvs tabellen, få margin: 0 auto; !!

aasahMedlem sedan mars 20034 471 inlägg

27 feb. 2007 19:54#12

Härligt! Nu funkar det! :e Tack zcorpan!

headbug, tack för förklaringen.

TroxyMedlem sedan mars 20041 505 inlägg

28 feb. 2007 09:37#13

aasah skrev:

Varför funkar inte center?

Här är anledningen:

W3C skrev:

Text-align. This property describes how inline content of a block is aligned.

http://www.w3.org/TR/CSS21/text.html#propdef-text-align

Tabeller är exempelvis inte inline-element utan block-element och därför kan man inte centrera tabeller med text-align.

zcorpanMedlem sedan dec. 20042 245 inlägg

28 feb. 2007 13:37#14

Troxy skrev:

Tabeller är exempelvis inte inline-element utan block-element och därför kan man inte centrera tabeller med text-align.

Hmm... vill bara klargöra så att termerna inte blandas ihop. :)

<table> är ett block-element i HTML men det är helt orelaterat till hur det visas med CSS. (Även om det inte var det du menade så är det lätt att blanda ihop det.)

HTML-tabeller är oftast "display:table" i CSS, och de beter sig med avseende på 'text-align' på samma sätt som "display:block", men de är egentligen inte block-element (i CSS alltså).

Man kan också ange "display:inline-table" och då fungerar det mer som "display:inline" med avseende på 'text-align'. Så ett alternativt sätt att centrera tabellen kunde vara att ange display:inline-table, men då hade tabellen kanske hamnat på samma rad som texten ovanför och dessutom saknar vissa webbläsare stöd för "display:inline-table". :)