Ayuda para alinear texto en 3 columnas

Hola, necesito alinear en 3 filas una lista de provincias, siendo una provincia a la izquierda, otra centrada y otra a la izquierda.

Utilice el css {float: left;} y {float: right;} para las provincias a derecha y izquierda y funciona perfectamente lo que al no existir {float: center;} utilice el css "position: absolute; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);" y las provincias del centro queda a una altura diferente de las de izquierda y derecha, aqui foto:




y utilizando <p align="center"> o <div align="center"> aparece asi sin estar alineado:




Como podria solucionarlo para que apareciera centrado totalmente y a la misma altura las 3 columnas?

Muchas gracias.

Haz 3 bloques (div) , uno por cada columna , das un ancho a cada bloque ( calcula si quieres padding y margins para cada uno de ellos).
Digamos q en paddings y márgenes se te va el 10%, pues a cada uno de los 3 bloques puedes dar 30% de ancho (30% +30%+30%+10% = 100% de tu ancho).

Recuerda de darle a estos divs float left y se te van a ir colocando solos como deseas uno al lado del otro. Si alguno se va abajo es porq has calculado mal y no te cabe.

- willSEO

Hola, lo que debes hacer es darle float:left; a las primeras 2 y float:right; a la ultima, de esta manera se alinearan las dos primeras, mostrándose obviamente primero la " primera " que tienes en tu html. Si quieres agregar padding, lo mejor para no hacer calculos y restar es utilizar box-sizing:border-box;

Saludos

Gracias por vuestra ayuda, al final lo consegui solucionar con este css:

.contenedor {
display: flex;
flex-wrap: wrap;
}

.provincia {
width: 33.3%;
}

.provincia:nth-child(3n+1) {
text-align: center;
}

.provincia:nth-child(3n+0) {
text-align: right;
}


Un saludo.

- - - Actualización- - -

Por cierto, sabeis como podria darle un poco mas de separacion vertical entre las provincias? Gracias