[HTML] Inhoud van layer verticaal centreren?

[Victorio]

Dat wil ik graag, heb gezocht maar kan er niets over vinden. Een cel in een tabel kan het natuurlijk met met valign="middle" maar of zo iets in een layer ook kan?

(Ik heb al geprobeerd:
text-valign: middle / center;
vertical-align: middle / center;
)

Deze layer laat keurig een rode rechthoek zien van 200x150px met daar boven gecentreerd 'Blaat!'. Maar ik wil de dat de tekst ook verticaal in het midden staat!

Kan dat? En ja ik kan natuurlijk een tabel gebruiken maar ik vraag me toch ernsitig af of het niet gewoon met een layer mogelijk is!

code:

<div style="background-color: #ff0000; width: 200px; 
height: 150px; text-align: center;">Blaat!</div>

[ Voor 18% gewijzigd door Victorio op 20-02-2004 15:19 ]

[Willem]

body,html (of container div) 100% width en height geven. Daarbinnen de div (of tekst, inline element) een top van 50% en een margin-top de helft van de hoogte meegeven, in negatieve zin (600px hoogte wordt dus margin-top:-300px;)

[Victorio]

Probleem is dat de inhoud van de layer steeds verschilt... dus is niet altijd dezelfde hoogte...

[Willem]

Moet die perse variabel zijn?
Anders gewoon overflow:overflow-y; meegeven.

[Verwijderd]

Voor zover ik kan nagaan is het niet mogelijk om in een layer verticaal te centreren.

Je kunt het beste de hele pagina opmaken in tabelvorm, daar wordt de tekst trouwens per default verticaal gecentreerd. Je kunt daarna layers plaatsen op een bepaalde positie in je scherm met een soortgelijke tag:

<div style="position:absolute; left:50px; top:0px; width:530px; height:4px; z-index:1; visibility: visible">

Ik zou je willen aanraden om een stylesheet te gebruiken voor je website. Dit is niet alleen makkelijker, maar zal in de toekomst standaard worden. De 'text-align' attribute die je nu nog gebruikt zal naar alle waarschijnlijkheid verdwijnen in de volgende HTML-versies.

Voor meer informatie zou je kunnen kijken op www.w3schools.com
Hier vind je alle standaard tags, attributes, events in HTML, XML, ASP, PHP, etc.

[Victorio]

Ok thnx!
Dan weet ik dat iig.
Kijken of het de moeite waard is om met tabellen aan de slag te gaan...

[disjfa]

Victorio schreef op 20 februari 2004 @ 15:45:
Kijken of het de moeite waard is om met tabellen aan de slag te gaan...

Nee dat is het niet, tenzei het tabulaire data is.

Waarom moeten mensen toch altijd met tabellen aankomen.... waarom......

[CrashOne]

http://annevankesteren.nl/test/templates/center-hv/

[Verwijderd]

disjfa schreef op 20 februari 2004 @ 15:47:
Waarom moeten mensen toch altijd met tabellen aankomen.... waarom......

• Omdat het al sinds de jaren '90 zo wordt gedaan
• Iedereen leert met view->source
• View->source levert in 90% van de gevallen nog steeds een TABLE-based layout op

[CrashOne]

Verwijderd schreef op 20 februari 2004 @ 15:32:
Voor zover ik kan nagaan is het niet mogelijk om in een layer verticaal te centreren.

Je kunt het beste de hele pagina opmaken in tabelvorm, daar wordt de tekst trouwens per default verticaal gecentreerd. Je kunt daarna layers plaatsen op een bepaalde positie in je scherm met een soortgelijke tag:

<div style="position:absolute; left:50px; top:0px; width:530px; height:4px; z-index:1; visibility: visible">

Ik zou je willen aanraden om een stylesheet te gebruiken voor je website. Dit is niet alleen makkelijker, maar zal in de toekomst standaard worden. De 'text-align' attribute die je nu nog gebruikt zal naar alle waarschijnlijkheid verdwijnen in de volgende HTML-versies.

Voor meer informatie zou je kunnen kijken op www.w3schools.com
Hier vind je alle standaard tags, attributes, events in HTML, XML, ASP, PHP, etc.

Waarom zou text-align verdwijnen?

[Rickets]

Verwijderd schreef op 20 februari 2004 @ 15:32:
Ik zou je willen aanraden om een stylesheet te gebruiken voor je website. Dit is niet alleen makkelijker, maar zal in de toekomst standaard worden. De 'text-align' attribute die je nu nog gebruikt zal naar alle waarschijnlijkheid verdwijnen in de volgende HTML-versies.

He cool, HTML heeft een attribute text-align!

[Verwijderd]

Attributes als text-align in de div-tag en de gehele font-tag worden door het World Wide Web consortium (W3 is de organisatie die o.a. gedragscodes/ handleidingen schrijft voor webdesigners) als 'deprecated' beschouwd.

Dit betekent niet dat het verdwijnt, maar dat dusdanige tags en attributes worden gezien als ouderwets en niet-nodig.

In principe zal de huidige HTML in de toekomst verdwijnen (maar wordt uiteraard nog wel ondersteund door de huidige browsers) en overgaan naar XHTML.

Volgens het World Wide Web consortium bevatten huidige websites veel incomplete HTML (paragrafen worden niet correct afgesloten, dat soort dingen).
Nu is XHTML ontwikkeld als 'nieuwe' standaard, waarin de beste eigenschappen van HTML en XML worden gebundeld (data worden zo met dezelfde broncode beschreven én getoond).
XHTML kan verder worden gelezen door alle XML-apparaten, zoals mobiele telefoons; HTML niet. XHTML is met een mooie term 'backward browser compatible' !!!

[Rickets]

Je hang nu een leuk verhaal op dat iedereen hier al kent, maar text-align is toch nog steeds CSS, geen HTML. Vandaar dat text-align als attribute niet gaat verdwijnen in HTML, want het bestaat niet.

[ Voor 4% gewijzigd door Rickets op 20-02-2004 16:52 ]

[BtM909]

Verwijderd schreef op 20 februari 2004 @ 16:47:
Attributes als text-align in de div-tag en de gehele font-tag worden door het World Wide Web consortium (W3 is de organisatie die o.a. gedragscodes/ handleidingen schrijft voor webdesigners) als 'deprecated' beschouwd.

Bron?

Je haalt een aantal dingen door elkaar. Er is geen text-align html parameter voor in een div (of whatever tag). Dit is al CSS en dat je het niet inline moet gebruiken is een ander verhaal.

Daarnaast is het lekker makkelijk om je verhaal aan te dikken met font-tags... Font tags zijn al een paar jaar deprecated. Font-tags is geen CSS!!!!

[Verwijderd]

Rickets, je hebt helemaal gelijk. Mijn fout...
Maar ja, het is vrijdagmiddag 5 uur .

Het is echter wel zo, dat de 'align'-attribute in de div-tag zal gaan verdwijnen.

[CrashOne]

Alle eigenschappen qua opmaak van een ieder element zou je moeten beschrijven in css, dus als je het zo stelt gaan ze allemaal verdwijnen.

[Verwijderd]

Ik stel het niet zo...dit zijn de richtlijnen van het W3
En ja, het is idd beter om alles via CSS te doen, veel overzichtelijker.
Veel opmaakelementen zijn in de loop der jaren trouwens al verdwenen.

[disjfa]

Verwijderd schreef op 20 februari 2004 @ 16:56:
Het is echter wel zo, dat de 'align'-attribute in de div-tag zal gaan verdwijnen.

goedzo, alles kwa opmaak in de html kan je beter erbuiten houden

opmaak moet in de css..... maar daar waren wij eigenlijk al achter. nu nog de tig conputergebruikers overtuigen

[Berkery]

Het is op zich niet zo moeilijk:

code:

div{
display: table-cell;
width: 100px;
height: 100px;
vertical-align: middle;
text-align: center;
}

...maar het werkt nou net niet in die ene veelgebruikte browser.

[--MeAngry--]

Ik hoor hier van mensen dat text-align gaat verdwijnen? Wat isser dan voor alternatief voor aangezien ik geen andere ken en gewoon align: center; bijvoorbeeld niet werkt...

[edit]
Sorry, had wel een keer goed mogen lezen...

[ Voor 18% gewijzigd door --MeAngry-- op 20-02-2004 23:58 ]

[Rickets]

--MeAngry-- schreef op 20 februari 2004 @ 23:53:
Ik hoor hier van mensen dat text-align gaat verdwijnen? Wat isser dan voor alternatief voor aangezien ik geen andere ken en gewoon align: center; bijvoorbeeld niet werkt...

Als je het topic gelezen had, had je gezien dat dat zeker niet gaat verdwijnen.

[Verwijderd]

Ter aanvulling. Het ALIGN attribuut in HTML is _helemaal_ anders dan de 'text-align' eigenschap in CSS. Het ALIGN attribuut doet namelijk ook aan het horizontaal centreren van een block-level element, hiervoor is de 'text-align' eigenschap (of property) niet bedoeld.

'text-align' kan alleen gebruikt worden op block-level elementen, maar heeft, volgens de regels (IE doet dit fout), alleen betrekking op het uitlijnen van de _tekst_, niet het element.

Wil je het element anders 'positioneren', zoals je dat kunt doen met het sterk verouderde ALIGN attribuut, dan zul je 'margin:0 auto;' moeten gebruiken om bijvoorbeeld te centreren. Daarnaast moet je ook nog een 'width' opgeven, anders werkt het niet.