Portability Hub
Register
Advertisement
VerticallyCenteredDataLabels

See how the data label, particularly for Age, is vertically centered?

Portable infoboxes use flexbox markup — something generally not present in older wikitext versions. If you’re going to be managing your community’s infobox styling, it’s a great idea to delve into flexbox code. Here’s a good starting place, though it’s by no means the only such resource on the web.

One of the most frequent requests we get having to do with flexbox has to do with ‘’vertical’’ centering. How, users ask, can you vertically center both the data label and the data value?

It’s actually pretty simple, but you have to remember to specify several vendor codes. Since you’ll likely want to make every infobox on your wiki behave this way, let’s take a look at how to do it globally:

.portable-infobox .pi-data-label,
.portable-infobox .pi-data-value {
	   padding: 0;
        display:-webkit-flex;
        display:flex;
}
.pi-data .pi-data-label,
.pi-data .pi-data-value {
        -ms-flex-preferred-size:auto;
        -webkit-flex-basis:auto;
           -moz-flex-basis:auto;
                flex-basis:auto;
        -webkit-align-items:center;
           -moz-align-items:center;
                align-items:center;
                width:50%;
}

Of course, you don’t have to do it exactly like this. You may find that you want to specify a flex-basis other than “auto”. You may not like a straight 50/50 split between the width of the data labels and values. But this gives you a starting point, wherein the positioning of the labels and values are in the vertical center of the cell, and all cells are equally wide.

See also

Advertisement