[SOLUCIONADO] Alinear textos en 3 columnas

MASTERX · #1 (**permalink**) 27/03/2016, 17:04

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.

andrinson · #2 (**permalink**) 27/03/2016, 17:48

intenta probar encerrando la segunda columna en una etiqueta <center></center>

mardojai · #3 (**permalink**) 27/03/2016, 19:05

Lo puedes hacer con Flexbox:

Código HTML:

Ver original<div class="contenedor">
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
  <div class="provincia">Provincia</div>
</div>

Código CSS:

Ver original.contenedor {
  display: flex;
  flex-wrap: wrap;
}
 
.provincia {
  width: 33.3%;
}
 
.provincia:nth-child(3n+2) {
  text-align: center;  
}
.provincia:nth-child(3n+0) {
  text-align: right;  
}

Ejemplo: https://jsfiddle.net/Mardojai/d8t1vf8x/2/

willyfc · #4 (**permalink**) 28/03/2016, 01:01

Hola.

Las columnas están en el html o son generadas de forma dinámica?, ese podría ser un buen dato para resolverlo, si están escritas sobre el html bastaría con esto:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css" media="screen">
        *{margin:0;padding: 0;}
        ul.provincias{
            display: block;
            list-style: none;
            width: 33.3%;
            float: left;
            background: red;
            outline:1px solid #000;
        }
        ul.provincias li{
            text-align: left;
            color:#000;
            padding:10px;
        }
    </style>
 
</head>
<body>
    <ul class="provincias">
        <li>prov 1</li>
        <li>prov 2</li>
        <li>prov 3</li>
        <li>prov 4</li>
        <li>prov 5</li>
        <li>prov 6</li>
        <li>prov 7</li>
    </ul>
    <ul class="provincias">
        <li>prov 1</li>
        <li>prov 2</li>
        <li>prov 3</li>
        <li>prov 4</li>
        <li>prov 5</li>
        <li>prov 6</li>
        <li>prov 7</li>
    </ul>
    <ul class="provincias">
        <li>prov 1</li>
        <li>prov 2</li>
        <li>prov 3</li>
        <li>prov 4</li>
        <li>prov 5</li>
        <li>prov 6</li>
        <li>prov 7</li>
    </ul>
</body>
</html>

MASTERX · #5 (**permalink**) 28/03/2016, 13:53

Muchas gracias a todos.

Al final lo consegui solucionar con el css de Mardojai pero cambiando un poco el codigo porque sino no se me centraba, use este al final:

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

Gracias por la ayuda

MASTERX · #6 (**permalink**) 28/03/2016, 15:03

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

g3kdigital · #7 (**permalink**) 01/04/2016, 10:59

Para la separación vertical, prueba usando padding:1em o la medida que quieras.

MASTERX · #8 (**permalink**) 05/04/2016, 08:20

Lo probe pero no me ha funcionado. Gracias igualmente