Webdesign:Center text: verschil tussen versies
k 1 versie geïmporteerd |
Geen bewerkingssamenvatting |
||
Regel 25: | Regel 25: | ||
</nowiki> | </nowiki> | ||
{{#tag:easyview|http://jsfiddle.net/kpRJs/2/|thumbnail=Testen in JSFIDDLE|iframe | {{#tag:easyview|http://jsfiddle.net/kpRJs/2/|thumbnail=Testen in JSFIDDLE|type=iframe}} | ||
{{sys:head:links}} | {{sys:head:links}} | ||
* {{#tag:easyview|http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html|thumbnail=andy-howard|iframe | * {{#tag:easyview|http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html|thumbnail=andy-howard|type=iframe}} |
Huidige versie van 6 jul 2025 om 14:44
Beschrijving
Het centreren van text midden in een box. Onderstaande oplossing werkt alleen als de tekst niet groter is dan de box.
CSS
.box { width: 400px; height: 400px; border:1px #f00 solid; display: table; } .bubble{ display: table-cell; vertical-align: middle; text-align: center; }
HTML
<span class="box"> <span class="bubble"> To look best, text should really be centered inside this bubble both vertically and horizontally </span> </span>