Webdesign:Center text: verschil tussen versies
a>Admin Nieuwe pagina aangemaakt met '{{sys:head:description}} Het centreren van text midden in een box. Onderstaande oplossing werkt alleen als de tekst niet groter is dan de box. ==CSS== <nowiki> .b...' |
Geen bewerkingssamenvatting |
||
| (Een tussenliggende versie door dezelfde gebruiker niet weergegeven) | |||
| 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>