In Blogs

For a customer we created a webpart that shows the stages of a project.
The text should be in the center of a block both horizontally and vertically and be adaptable to multiple lines.

I had to dig deep in my memory!
A simple CSS trick will do the magic for this, using CSS tables.

The HTML (simplified)

<div class="project-stage”>
     <span class="project-stage-term">This one is over 2 lines</span>
</div>

The CSS (simplified)

.project-stage {
     display: table;
     height: 100px;
     width: 100px;
}
.project-stage-term {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
}

The result

center text

Vul je zoekopdracht in.