Verticaal text centreren in een <p>

[guidogast]

Hoi,

Ik ben met een website bezig. Nu heb ik een div met daarin een aantal <p> elementen onder elkaar waar soms 1 en soms 2 regels in moeten staan. Nu moet ik de text verticaal in de p centreren. Nu heb ik al gegoogled en ik zie dat ik de line-height property moet gebruiken, maar dat kan dus niet, want soms zit er een p tussen die twee regels heeft.

Heeft iemand een oplossing hiervoor?

Guido

 

[pelikano]

Hoi Guido,
soms is het handig om gewoon een onzichtbare tabel neer te zetten om de tekst uit te lijnen. Dirty maar wel quick.

 

[guidogast]

Hoi Guido,
soms is het handig om gewoon een onzichtbare tabel neer te zetten om de tekst uit te lijnen. Dirty maar wel quick.

Ha, handige hack, maar ben bang dat ik geen onnodige code wil Weet je niet toevallig een andere manier?

Maar bedankt voor je snelle reactie!

 

[pelikano]

Als je het echt netjes wilt zul je met CSS moeten gaan werken. Maar misschien kun je wat prutsen met line-height

http://www.homepage-maken.nl/csscursus/les5.php

 

[csshunter]

Hoi guidogast,
Gewoon een even grote padding-top en padding bottom op de <p>, zou ik zeggen: quick & clean.
Daar is geen onzichtbare tabel voor nodig, en de line-height van de <p> kan onveranderd blijven om bij twee of meer regels de regelafstand prettig klein te houden.

Met vriendelijke groet,
CSShunter

 

[guidogast]

Hoi guidogast,
Gewoon een even grote padding-top en padding bottom op de <p>, zou ik zeggen: quick & clean.
Daar is geen onzichtbare tabel voor nodig, en de line-height van de <p> kan onveranderd blijven om bij twee of meer regels de regelafstand prettig klein te houden.

Met vriendelijke groet,
CSShunter

Bedankt voor de reactie CSSHunter, maar dat had ik al geprobeerd. Omdat de p niet altijd 1 regel bevat, kan dat niet... Want de 2-regel P's staan al bijna in het midden, terwijl de enkel-regel P's helemaal bovenaan zijn uitgelijnt...

 

[guidogast]

Voor de duidelijkheid is dit mijn situatie:


Nu moeten beide stukjes tekst in het midden komen te staan... Maar hoe?

 

[Gunneweg]

Hoi Guidogast,

Ik heb hetzelfde probleem opgelost door de CSS code

P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}

Je dient nog wel de width aan te passen.

 

[csshunter]

Hoi Guidogast,
Aha, jaha, maar je had er niet bij gezegd dat ze even hoog moesten zijn!
Dan zullen we toch terug moeten vallen op de onzichtbare tabel, maar deze keer nog onzichtbaarder dan onzichtbaar.

In de html moeten daarvoor het plaatje en de tekst elk een <span>'netje krijgen:

<ul class="serie">
	<li>
		<span><img src="images/centreer-plaatje.png" alt="" /></span>
		<span>lorum laboremporum volupis cum esti comnis re ommodi ratem dolor sint volorerum consed est</span>
	</li>
	<li>
		<span><img src="images/centreer-plaatje.png" alt="" /></span>
		<span>Lorem ipsum, dit valt toch mee</span>
	</li>
</ul>

Vervolgens kan de nep-tabel er via de css in gestopt worden:

.serie {
	...
	display: table;
	}
.serie li {
	...
	display: table-row;
	}
.serie img {
	...
	vertical-align: top; 
	}
.serie li > span {
	...
	display: table-cell;
	vertical-align: middle;
	}

Zo kan de bezoeker ook straffeloos het letterformaat opschalen in z'n/h'r browser, en ook meerdere regels zijn toegestaan; of eventueel een plaatje met andere hoogte in een ander vakje.

• Test: text-verticaal-gecentreerd.htm
  
  
• Doet het in Firefox, Chrome, Opera, Safari en Internet Explorer 8 en 9.
• Maar zoals te verwachten en te voorzien was: IE7 doet het niet. Die zal dan met een Conditional Comment bediend moeten worden om alles gewoon bovenaan te laten beginnen.

Met vriendelijke groet,
CSShunter

[edit]Kruispost met Ed Gunneweg (ik ben bang dat dat niet werkt: dat is een prima horizontale centrering, maar geen verticale).[/edit]

 

[Gunneweg]

Sorry Guidogast en Csshunter

Dit had waarschijnlijk moeten zijn:

DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }

Misschien helpt dit met het probleem