Fandom

Infobox Wikia

Flex-centering and portable infoboxes

225pages on
this wiki
Add New Page
Comments0 Share
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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.