Webdesign:Center text

Terug naar Webdesign

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>​

Testen in JSFIDDLE

Externe Links

• andy-howard