Lodret centrering af text i DIV

margin er den "udvendige" side af en box.
padding er den "indvendige"

Forstår ikke lige "lodret" ?

Jeg vil gerne have teksten til at stå centreret - både lodret og vandret.
Vandret klares med: text-align: center;
Lodret troede jeg, kunne klares med: vertical-align: middle;

Prøv fx at tjekke her:

http://www.fam-johansen.dk/skabelon/

Næsten øverst har jeg 4 punkter: 1. Vælg periode, 2. Priser osv.

Disse tekster vil jeg gerne have til at stå i midten. Lige nu står de i toppen.

Jeg kan løse det ved at sætte:
height 5px mindre
+
padding-top til 5px.

Men det er vist lidt uautoriseret!

Hvis ikke du kender højden på den tekst der skal centreres vertikalt er det umuligt!

- medmindre du justerer med script efter den er vist (og du kan spørge den hvor høj den blev)

Brandirriterende..

hmm, jeg er faktisk ikke klar over hvordan vertical-align bliver brugt ?

Hvis du kender højden, skal du bare give den en top-margin = det halve.

stryg det sidste : )

OK - men jeg har det trods alt til at virke med padding-top og en mindre height.

I dit tilfælde hvor du VED hvor høj teksten er, kan du bare give boksen en passende padding-top.

Jeg skal lære at reloade, inden jeg skriver : )

vertical-align virker på indhold af tabeller.
Derfor bliver vertical-align aktivt hvis du tilføjer:

display: table-cell;

Og da din "menu" er en vandret linie, vil det ikke forstyrre designet.
Måske kan float:left; undværes.

#12. "display: table-cell;" havde jeg faktisk prøvet, men det gjorde ingen forskel.

Jeg opdaterer lige www.fam-johansen.dk/skabelon, så du kan se, at det ikke virker - eller måske kan du se, hvad jeg har gjort forkert!

#13 Jeg havde ellers testet det, men nu hvor jeg også indsætter float:left; i mit eksempel går det galt.

Prøv at slette linien float:left;

#14 Så går det helt galt med placeringen.

Du har glemt at sætte display:table-cell på de passive

Er nu rettet. Men det ser skidt ud i Firefox.

to ting:
- du har float:left på din top. Hvorfor det?
- top og boks1 er omkranset af en <div>. hvorfor er passiv/aktiv linien ikke det?

Derudover: undgå float i et fast design som det aktuelle.

#18 Tak for din tålmodighed indtil nu.
Jeg er nok ikke så skarp på CSS, men øver mig og bliver også klogere.
Det hjalp at få fjernet "float:left" fra DIV-top.

Som jeg ser det, så har jeg en overordnet DIV-Yderkrans, og alle andre DIV ligger inde i DIV-Yderkrans, herunder Top, Boks1, Boks2, Passiv/aktiv linjen m.fl.
Skal Passiv/aktiv linjen være omkranset af <div></div>?

Jeg synes, det er ved at se ret fornuftigt ud.
Det eneste, der bekymrer mig, er at hvis jeg i IE vælger at vise i kompatibilitetstilstand, så ser det ikke godt ud med min aktiv/passiv linje, idet bredde og højde fjernes.

#19 DIV er et blok-element, så hvergang der starter en ny, kommer der et linieskift, og DIVen reserverer plads i hele bredden.

Så jeg synes at du skal have en <div id="progress"> uden om de fire statusfelter, da det netop er en bred linie i designet. Dermed kan de visse css-linier fra trinAktiv og trinPassiv flyttes til denne, så de ikke skal stå 2 gange.
Og har du ikke også flere linier end nødvendigt?

Jeg synes også at du skal ændre de 4 gange span til 4 gange div.

display:table-cell annullerer div's ønske om at fylde hele bredden, og lader flere divs stå på række.

Det kan du også bruge til boks1 og 2:
Der er ingen tekst der skal bruge float i dit design: Se om du kan få dem alle fjernet.

#21 Hold da op, hvor lærer jeg meget nyt. Tak for dine tilbagemeldinger.

Jeg bliver dog udfordret med "display:table-cell", når jeg anvender den i Boks1 og 2, da alle margin-afstande nulstilles.
Hvordan får jeg så afstande mellem boksene?

Og helt galt kommer det til at se ud, når siden vises i kompatibilitetstilstand. Men det skal jeg måske lægge noget i.

Og du skriver at jeg skal sætte <div id="progress">, hvilket jeg har gjort. Men jeg er ikke med på, om jeg skal definere noget i CSS-filen?

Jeg har søgt lidt på IE og table-cell, og det kom først med i IE 8.

Så jeg må nok anbefale at droppe table-cell igen, og lave "trin"-linien om til en table med 1 tr og 4 td, hvis det skal virke i MSIE før version 8.

Beklager at jeg fik ledt på vildspor.

Du har sandelig være til meget mere gavn - så mange tak for det.
Sender du et svar.

OK. Og tak for point.