[CSS] Vertical-align wil niet

[_Thanatos_]

Ik heb een super-simpel element met een vertical-align. Maar op de een of andere manier wordt er niets verticaal uitgelijnd. Drie manieren geprobeerd:

HTML:

<div style="vertical-align: middle; height: 60px; border: solid 1px black">
   blaat
</div>

HTML:

<div style="vertical-align: middle; height: 60px; border: solid 1px black">
   <div>blaat</div>
</div>

HTML:

<div style="height: 60px; border: solid 1px black">
   <div style="margin-top: auto; margin-bottom: auto">blaat</div>
</div>

De eerste bewijst dat vertical-align gewoon lekker blijft top-alignen. De tweede bewijst dat vertical-align het ook niet op block-elements doet. De derde bewijst dat een block-element verticaal uitlijnen met margins zelfs niet werkt.

Getest in Firefox 2.0.0.4 en Opera 9.21.

Hoe kan dit? Het lijkt me vrij triviaal, dus ik zal wel iets fout doen

[BtM909]

height zegt wat over 't element, niet over de regels erin.

Cascading Stylesheet:

line-height:60px;

should do the trick

[_Thanatos_]

en als het meerdere regels tekst worden?

[BtM909]

Dan wordt het al gauw lastig

http://phrogz.net/CSS/vertical-align/index.html
http://www.jakpsatweb.cz/...ical-center-solution.html

[BasieP]

BtM909 schreef op dinsdag 17 juli 2007 @ 17:24:
Dan wordt het al gauw lastig

http://phrogz.net/CSS/vertical-align/index.html
http://www.jakpsatweb.cz/...ical-center-solution.html

je eerste link maakt gebruik van een IE hack (is die nog nodig in IE7?)
je tweede link gaat er vanuit dat je weet hoe hoog je element is dat gecentreerd moet worden.

dus als je niet weet of je 1 of 3 regels wilt centreren gaat dit niet op.

mij oplossing is simpel en net zo foutief:

HTML:

<table><tr><td style="vertical-align: middle;">
  hier je tekst<br>met een <br>of twee newlines
</td></tr></table>

[_Thanatos_]

hm, nouja, in dit geval is het - gelukkig - maar 1 regel, dus dan maar de line-height optie. Het moet maar. Maar ik vind het wel een bug in de browsers.

Thanks anyway

[BtM909]

_Thanatos_ schreef op dinsdag 17 juli 2007 @ 17:33:
hm, nouja, in dit geval is het - gelukkig - maar 1 regel, dus dan maar de line-height optie. Het moet maar. Maar ik vind het wel een bug in de browsers.

Thanks anyway

ach, de vraag is: waarom zou je iets in het midden willen centreren?

[BasieP]

BtM909 schreef op dinsdag 17 juli 2007 @ 17:38:
[...]

ach, de vraag is: waarom zou je iets in het midden willen centreren?

volgens mij is dit helemaal niet de vraag.. wanneer je een opmaaktaal maakt (html/css) wil je dat je alle mogelijke dingen kunt..
als je dan dit soort (toch super basic) dingen mist denk ik echt dat je wat fout doet...

[Rickets]

Je kan ook display: table-cell erbij gebruiken, maar ik weet niet wat je aan browsers moet ondersteunen.

BtM909 schreef op dinsdag 17 juli 2007 17:38:
ach, de vraag is: waarom zou je iets in het midden willen centreren?

Omdat iets rechts centreren niet kan

[BtM909]

BasieP schreef op dinsdag 17 juli 2007 @ 17:39:
[...]

volgens mij is dit helemaal niet de vraag.. wanneer je een opmaaktaal maakt (html/css) wil je dat je alle mogelijke dingen kunt..
als je dan dit soort (toch super basic) dingen mist denk ik echt dat je wat fout doet...

Ik mag vragen wat ik wil

Jij wilt graag alle mogelijke dingen doen in CSS, maar mijn vraag slaat niet op de mogelijkheden van CSS. Mijn vraag slaat op de titel van dit topic en de probleemstelling zoals gebracht door de topicstarter

http://www.w3.org/TR/CSS21/visudet.html#line-height

Daar kan je ook lezen waarom vertical-align is bedacht. Als de topicstarter een tabel (althans het gedrag) wil nabootsen, dan ben ik nieuwsgierig waarom een element verticaal ge-aligned moet worden in een ander element

---

Rickets schreef op dinsdag 17 juli 2007 @ 17:44:
Je kan ook display: table-cell erbij gebruiken, maar ik weet niet wat je aan browsers moet ondersteunen.

[...]

Omdat iets rechts centreren niet kan

We hadden het over verticaal centreren.... Nog een zo'n wise-guy opmerking and you're mine

[ Voor 18% gewijzigd door BtM909 op 17-07-2007 17:53 ]

[crisp]

BasieP schreef op dinsdag 17 juli 2007 @ 17:39:
[...]

volgens mij is dit helemaal niet de vraag.. wanneer je een opmaaktaal maakt (html/css) wil je dat je alle mogelijke dingen kunt..
als je dan dit soort (toch super basic) dingen mist denk ik echt dat je wat fout doet...

CSS3 beschrijft die mogelijkheid in de vorm van Template-based positioning. Nog even wachten dus (een jaartje of 15 voordat IE het ondersteund )

[BasieP]

BtM909 schreef op dinsdag 17 juli 2007 @ 17:52:
[...]

Ik mag vragen wat ik wil

ik zeg ook niet dat het niet mag, ik zeg dat het niet DE vraag is

@crisp.. alsof inet dan nog in zijn huidige vorm bestaat

[ Voor 12% gewijzigd door BasieP op 17-07-2007 18:47 ]

[Cartman!]

Volgens mij werkt vertical-align ook alleen maar op images, die optie kon je op vorhand al vergeten.

[BtM909]

BasieP schreef op dinsdag 17 juli 2007 @ 18:47:
[...]

ik zeg ook niet dat het niet mag, ik zeg dat het niet DE vraag is

@crisp.. alsof inet dan nog in zijn huidige vorm bestaat

En DE slaat op Als je mij quoot dan lijkt het alsof het op mij slaat

Anyhoe: ga dan ook even in op m'n overig deel van mijn post, aangezien het wel een leuke discussie kan worden

Laat voorlopig expres wat info weg

[Martinspire]

Volgens mij werkt dat inderdaad alleen op images maar als je een tabel gebruikt met de td als valign="center" moet het geloof ik wel lukken. Maar is inderdaad zo dat het uitlijnen van elementen erg vaag is.

[Cartman!]

djmantri schreef op dinsdag 17 juli 2007 @ 20:41:
Volgens mij werkt dat inderdaad alleen op images maar als je een tabel gebruikt met de td als valign="center" moet het geloof ik wel lukken. Maar is inderdaad zo dat het uitlijnen van elementen erg vaag is.

dan zou het valign="middle" zijn overigens behalve dat een tabel cell altijd middle valigned

[ Voor 6% gewijzigd door Cartman! op 17-07-2007 20:46 ]

[crisp]

vertical-align werkt op line boxes en heeft binnen het table-layout model ook een speciale - maar iets andere - betekenis.
De hoogte van een line box wordt bepaald door berekende line-height.

Cartman! schreef op dinsdag 17 juli 2007 @ 20:44:
[...]

dan zou het valign="middle" zijn overigens behalve dat een tabel cell altijd middle valigned

Dat klopt, valign is implied en neemt als default waarde 'middle'. Echter zal een vertical-align in CSS hierop voorgaan.

Kortom: het is allemaal in de specificaties te vinden

[ Voor 13% gewijzigd door crisp op 17-07-2007 23:06 ]

[BasieP]

BtM909 schreef op dinsdag 17 juli 2007 @ 20:17:
[...]

En DE slaat op Als je mij quoot dan lijkt het alsof het op mij slaat

ik bedoelde er alleen maar mee dat er over dat onderwerp veel boeiendere vragen zijn. Namelijk waarom het niet zou kunnen, en of dit bewust is gebeurd ja/nee.

de vraag die jij stelt vind ik helemala niet boeiend. Toch zeg je 'de vraag is'. Voor mij is dit niet DE vraag.
(hoop dat je zo iig weet dat ik het niet persoonlijk bedoel ofzo)

over de rest van je post..
ik begrijp niet helemaal welke kant je op wilt.
Ik kan in iedergeval genoeg voorbeelden bedenken waarom je iets (tekst in dit geval) verticaal wilt centreren

[_Thanatos_]

je eerste link maakt gebruik van een IE hack

Nee hoor, het is ook een Firefox-hack. En een Opera-hack. Het fixt de alignment in alle browsers gewoon, zij het met slechts 1 regel tekst.

HTML:

<table><tr><td style="vertical-align: middle;">
  hier je tekst<br>met een <br>of twee newlines
</td></tr></table>

Helaas kan ik niet gaan rommelen met tables. De semantiek van de HTML moet blijven kloppen.

[BtM909]

BasieP schreef op dinsdag 17 juli 2007 @ 23:11:
[...]

ik bedoelde er alleen maar mee dat er over dat onderwerp veel boeiendere vragen zijn. Namelijk waarom het niet zou kunnen, en of dit bewust is gebeurd ja/nee.

Wat precies de vraag is die ik impliceer.

de vraag die jij stelt vind ik helemala niet boeiend. Toch zeg je 'de vraag is'. Voor mij is dit niet DE vraag.
(hoop dat je zo iig weet dat ik het niet persoonlijk bedoel ofzo)

Je zegt zelf "voor mij is ..." leuk voor jou, maar ik dacht dat dit forum niet rondom jou is opgezet, dus ik mag nogmaals vragen wat ik wil. Is het niet interessant dan wordt er niet op gereageerd. Ik reageerde ook niet op jou, maar op iemand anders

over de rest van je post..
ik begrijp niet helemaal welke kant je op wilt.
Ik kan in iedergeval genoeg voorbeelden bedenken waarom je iets (tekst in dit geval) verticaal wilt centreren

Nou geef dan eens een concreet voorbeeld. CSS2.1 is niet perfect, maar nogmaals een vertical-align is niet bedoeld om tekst ala een tabel tekst te alignen

[BasieP]

@BtM909:
ik weet niet waarom je zo reageerd als je doet, maar ik impliceer nergens dat het forum om mij is opgebouwd of weetikwat.
Je doet volgens mij hard je best om mijn woorden verkeerd te interpreteren.
Ik ben niet 'tegen' je hoor

[BtM909]

BasieP schreef op woensdag 18 juli 2007 @ 09:51:
@BtM909:
ik weet niet waarom je zo reageerd als je doet, maar ik impliceer nergens dat het forum om mij is opgebouwd of weetikwat.
Je doet volgens mij hard je best om mijn woorden verkeerd te interpreteren.
Ik ben niet 'tegen' je hoor

Waarom laat je die discussie dan niet rusten en ga je in op de rest van mijn punten

[BasieP]

BtM909 schreef op woensdag 18 juli 2007 @ 10:11:
[...]

Waarom laat je die discussie dan niet rusten en ga je in op de rest van mijn punten

ik probeer juist niet op je punten in te gaan en daardoor de discusie te laten rusten:
zie ook je eigen reactie:

Anyhoe: ga dan ook even in op m'n overig deel van mijn post, aangezien het wel een leuke discussie kan worden

punt is dat ik al weet waar de discussie heen gaat, en geen zin heb om weer te verzanden in een 'waarom is CSS 2 incompleet' discussie.

echter als jij zegt

En DE slaat op Als je mij quoot dan lijkt het alsof het op mij slaat

dan wil ik hier natuurlijk op reageren, omdat je me hier gewoon verkeerd begrijpt. Dit wil ik niet en dus leg ik het uit.
Is dus compleet offtopic en hier ga ik dus (bewust) niet in op de vraag die je stelde. (die je, zoals je zelf aangeeft, ook niet aan mij stelde)

bovendien vind ik de stelling "waarom laat je het niet rusten" compleet niks te maken hebben met het feit of jij het gevoel hebt of ik 'tegen' je ben ja/nee..

Ik mag best opmerkingen maken op jouw post zonder op je vraag in te gaan toch?

[ Voor 11% gewijzigd door BasieP op 18-07-2007 10:56 ]

[BtM909]

BasieP schreef op woensdag 18 juli 2007 @ 10:54:
[...]

ik probeer juist niet op je punten in te gaan en daardoor de discusie te laten rusten:
zie ook je eigen reactie:

[...]

punt is dat ik al weet waar de discussie heen gaat, en geen zin heb om weer te verzanden in een 'waarom is CSS 2 incompleet' discussie.
echter als jij zegt

[...]

dan wil ik hier natuurlijk op reageren, omdat je me hier gewoon verkeerd begrijpt. Dit wil ik niet en dus leg ik het uit.
Is dus compleet offtopic en hier ga ik dus (bewust) niet in op de vraag die je stelde. (die je, zoals je zelf aangeeft, ook niet aan mij stelde)

bovendien vind ik de stelling "waarom laat je het niet rusten" compleet niks te maken hebben met het feit of jij het gevoel hebt of ik 'tegen' je ben ja/nee..

Ik mag best opmerkingen maken op jouw post zonder op je vraag in te gaan toch?

Doe je het gewoon weer

Concrete vraag:

Ik kan in iedergeval genoeg voorbeelden bedenken waarom je iets (tekst in dit geval) verticaal wilt centreren

Geef maar een voorbeeld

En wil je de meta-discussie nog verder voeren, gebruik dan ff DM oid ipv dit topic

[BasieP]

BtM909 schreef op woensdag 18 juli 2007 @ 11:02:
[...]

Doe je het gewoon weer

Wat doe ik gewoon weer?
als ik iets fout doe hoor ik het graag. Ik zie alleen niet wat ik fout doet en jij helpt me er ook niet echt bij.

Concrete vraag:

[...]

Geef maar een voorbeeld

Nee dit wil ik niet. Ik heb toch duidelijk aangegeven niet inhoudelijk te willen discuseren? lees je me posts wel?

no offence ofzo hoor, maar misschien moet je even adem halen, alles goed doorlezen en dan pas weer wat zeggen.

En wil je de meta-discussie nog verder voeren, gebruik dan ff DM oid ipv dit topic

och ja.. ik moet het via dm doen.. want je zult als modje eens moeten toegeven dat jij mij verkeerd hebt begrepen ipv andersom.

even voor de duidelijkheid:
Jij stelt mij een vraag binnen dit topic:

Waarom laat je die discussie dan niet rusten en ga je in op de rest van mijn punten

ik reageer hier dan ook op binnen dit topic. Dat is toch niet vreemd?
Ik hoop niet dat hier een mega punt van gemaakt wordt hoor, maar ik vind het wel erg zwaar offtopic gaan inmiddels.
Mijn eerdere post was toch duidelijk?

punt is dat ik al weet waar de discussie heen gaat, en geen zin heb om weer te verzanden in een 'waarom is CSS 2 incompleet' discussie.

en

Ik mag best opmerkingen maken op jouw post zonder op je vraag in te gaan toch?

Verder heb ik weinig zin om dmv DM te gaan discuseren (bekvechten?) over dit nutteloze onderwerp.

[ Voor 3% gewijzigd door BasieP op 18-07-2007 11:30 ]

[BtM909]

Misschien was m'n opmerking niet duidelijk, maar offtopic discussies blijven uit dit topic. Lees je DM

[Verwijderd]

Om tekst in een div verticaal uit te lijnen, gebruik ik het volgende (Ik ga hiermee niet voor de Nobelprijs, maar in sommige stituaties moet 't dienst kunnen doen):

Cascading Stylesheet:

#container {
    border:1px solid black;
    height:90px;
}
#text {
    position:relative;
    top:50%;
    max-height:2em;
    margin-top:-1em;
}

HTML:

<div id="container">
    <div id="text">
        blaat<br />beeeehhh
    </div>
</div>

Dit heeft natuurlijk nogal wat bepekingen:
- Je moet enigszins weten hoeveel regels je tekst in beslag zal nemen. Adh daarvan moet je je max-height en je margin-top aanpassen. Dat is een kwestie van even op het oog testen. Kleine divs (50-100px) kunnen een verschil van 1 regel wel aan. Hoe groter je container, hoe groter het verschil mag zijn. Zeker als je geen borders of contrasterende achtergrond gebruikt.
- Het werkt alleen met tekst (en kleine plaatjes).
- Geen idee wat IE<7 hiermee doet.
- Een beetje sleutelen aan de line-height helpt.

Het leuke is dat het in alle lettergroottes werkt.

P.S.: Als je echt heel graag exact het gedrag van een cel wil hebben, dan kun je natuurlijk de div via het DOM ombouwen tot table-tr-td met valign:middle.

[BasieP]

Verwijderd schreef op woensdag 18 juli 2007 @ 22:07:
P.S.: Als je echt heel graag exact het gedrag van een cel wil hebben, dan kun je natuurlijk de div via het DOM ombouwen tot table-tr-td met valign:middle.

das een goede
lekker pimpen met je semantisch correcte code, todat je JS het omzet naar table-tr-td

[Verwijderd]

BasieP schreef op woensdag 18 juli 2007 @ 22:09:
[...]
das een goede
lekker pimpen met je semantisch correcte code, todat je JS het omzet naar table-tr-td

Anything for semantics!

In navolging van André's list-naar-select heb ik in een ander topic al wel 'ns voorgesteld om een list naar een table om te bouwen. En ik heb zelf iets dat H1's ombouwt naar plaatjes (vanwege een font dat de meeste Windows-gebruikers niet hebben).

Je kunt je afvragen hoe ver je hierin moet gaan natuurlijk

[ Voor 48% gewijzigd door Verwijderd op 19-07-2007 08:32 ]