FANDOM


VerticallyCenteredDataLabels

Vê como a etiqueta de informação, particularmente Idade, está centralizada verticalmente?

Infoboxes portáteis usam a marcação flexbox - algo que não estava presente em versões mais antigas de wikitexto. Se você quer gerenciar a personalização das infoboxes da sua comunidade, é uma boa ideia analisar o código flexbox. Esse é um bom lugar para começar, embora não seja o único recurso na internet.

Um dos pedidos mais frequentes que nós recebemos que envolve flexbox tem a ver com centralização vertical. Como você pode centralizar tanto o etiqueta de informação quanto o valor?

Na verdade, isso é muito simples, mas você precisa lembrar de especificar vários códigos de fornecedor. Já que você provavelmente vai querer que todas as infoboxes da sua wiki se comportem dessa maneira, vamos ver como fazer isso globalmente:

.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%;
}

E claro, você não precisa fazer exatamente isso. Talvez você descubra que é melhor especificar uma flex-basis com algo diferente de "auto". Talvez você não goste da divisão 50/50 entre a largura das etiquetas de informação e valores. Mas isso lhe ajudará a começar, onde a posição das etiquetas e dos valores estão no centro vertical da célula e todas as células tem a mesma largura.