Archief - CSS: Verticaal centreren?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
a

azerty_2006

Legacy Member
Hey :).

Kan iemand me soms vertellen hoe je makkelijk iets kan verticaal centeren?
Of kan dit ook gedaan worden met 'text-align'?
Momenteel zit ik al de hele tijd te prutsen met line-height maar dit lijkt mij ver de de ideale oplossing...
a

azerty_2006

Legacy Member
Xavez zei:
http://technation.be/node/6
Klik om te vergroten...

Bedank voor de link Xavez. Maar ik denk dat je me een beetje verkeerd begrijpt.
Ik wil geen element in het midden krijgen maar de text binnen een element. Jouw methode is handig voor een pagina in het midden te plaatsen. Ik zoek namelijk een manier om puur (en dynamic) text verticaal te centreren :).
X

Xcessive-

Legacy Member
Met 1 regel tekst kun je line-height gebruiken maar bij meerdere regels niet. Heb zelf geen idee hoe het dan moet.
a

azerty_2006

Legacy Member
Xcessive- zei:
Met 1 regel tekst kun je line-height gebruiken maar bij meerdere regels niet. Heb zelf geen idee hoe het dan moet.
Klik om te vergroten...

Yup zo deed ik het ook maar werkt alleen maar als de inhoud geweten is (static text). Nuja heb eigenlijk geen andere manier meer nodig en zal het wel anders oplossen.

Toch bedank voor jullie reacties! :niceone:
J

Jexx

Legacy Member
Als ge weet hoe groot u textblok is.. door het bijvoorbeeld in een DIV te steken met vaste waarden...

Het boxmodel dus.. 1 grote DIV met uw webpagina daarin. Dan kunde het volgende doen om u verticaal te centreren via CSS.

HTML: 
.box { Position: absolute;
top:50%;
height:600px(bijvoorbeeld);
margin-top:-300px;}

Wat ge doet is eigenlijk u box verticaal centreren door top:50% te zetten. de linkerbovenhoek van u box is dus nu in het midden van u pagina. Dan omdat ge weet da uwe box 600px hoog is, de margin-top op -300px zette, wat de box met de helft naar boven doet verschuiven.

Zelfde kun je horizontaal doen.

HTML: 
.index {		 		position:absolute;
					left:50%;
					top:50%;
					height:600px;
					width:600px;
					margin-left:-300px;
					margin-top:-300px;
					text-align:center;
					}
voorbeeld van een volledig gecentreerde box. laat je pagina overflowen en je kunt je tekst er mooi binnen houden. Je kan dit rond je huidige pagina bouwen in principe.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan