Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Alinear textos en 3 columnas

Estas en el tema de Alinear textos en 3 columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/03/2016, 18:04
 
Fecha de Ingreso: octubre-2007
Mensajes: 39
Antigüedad: 12 años, 1 mes
Puntos: 2
Alinear textos 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.
  #2 (permalink)  
Antiguo 27/03/2016, 18:48
 
Fecha de Ingreso: enero-2016
Mensajes: 61
Antigüedad: 3 años, 10 meses
Puntos: 0
Respuesta: Alinear textos en 3 columnas

intenta probar encerrando la segunda columna en una etiqueta <center></center>
  #3 (permalink)  
Antiguo 27/03/2016, 20:05
Avatar de mardojai  
Fecha de Ingreso: noviembre-2012
Ubicación: Lima, Perú
Mensajes: 137
Antigüedad: 7 años
Puntos: 44
Respuesta: Alinear textos en 3 columnas

Lo puedes hacer con Flexbox:

Código HTML:
Ver original
  1. <div class="contenedor">
  2.   <div class="provincia">Provincia</div>
  3.   <div class="provincia">Provincia</div>
  4.   <div class="provincia">Provincia</div>
  5.   <div class="provincia">Provincia</div>
  6.   <div class="provincia">Provincia</div>
  7.   <div class="provincia">Provincia</div>
  8.   <div class="provincia">Provincia</div>
  9.   <div class="provincia">Provincia</div>
  10.   <div class="provincia">Provincia</div>
  11.   <div class="provincia">Provincia</div>
  12.   <div class="provincia">Provincia</div>
  13.   <div class="provincia">Provincia</div>
  14.   <div class="provincia">Provincia</div>
  15.   <div class="provincia">Provincia</div>
  16.   <div class="provincia">Provincia</div>
  17. </div>

Código CSS:
Ver original
  1. .contenedor {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4. }
  5.  
  6. .provincia {
  7.   width: 33.3%;
  8. }
  9.  
  10. .provincia:nth-child(3n+2) {
  11.   text-align: center;  
  12. }
  13. .provincia:nth-child(3n+0) {
  14.   text-align: right;  
  15. }
Ejemplo: https://jsfiddle.net/Mardojai/d8t1vf8x/2/
__________________
El que supera a otros es poderoso, y el que se supera a sí mismo es invencible.
__________________
Si te sirvió puntúa.
  #4 (permalink)  
Antiguo 28/03/2016, 02:01
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 11 años, 2 meses
Puntos: 40
Respuesta: Alinear textos en 3 columnas

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
  1. <!DOCTYPE html>
  2.     <meta charset="utf-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <title></title>
  5.     <style type="text/css" media="screen">
  6.         *{margin:0;padding: 0;}
  7.         ul.provincias{
  8.             display: block;
  9.             list-style: none;
  10.             width: 33.3%;
  11.             float: left;
  12.             background: red;
  13.             outline:1px solid #000;
  14.         }
  15.         ul.provincias li{
  16.             text-align: left;
  17.             color:#000;
  18.             padding:10px;
  19.         }
  20.     </style>
  21.  
  22. </head>
  23.     <ul class="provincias">
  24.         <li>prov 1</li>
  25.         <li>prov 2</li>
  26.         <li>prov 3</li>
  27.         <li>prov 4</li>
  28.         <li>prov 5</li>
  29.         <li>prov 6</li>
  30.         <li>prov 7</li>
  31.     </ul>
  32.     <ul class="provincias">
  33.         <li>prov 1</li>
  34.         <li>prov 2</li>
  35.         <li>prov 3</li>
  36.         <li>prov 4</li>
  37.         <li>prov 5</li>
  38.         <li>prov 6</li>
  39.         <li>prov 7</li>
  40.     </ul>
  41.     <ul class="provincias">
  42.         <li>prov 1</li>
  43.         <li>prov 2</li>
  44.         <li>prov 3</li>
  45.         <li>prov 4</li>
  46.         <li>prov 5</li>
  47.         <li>prov 6</li>
  48.         <li>prov 7</li>
  49.     </ul>
  50. </body>
  51. </html>
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 28/03/2016, 14:53
 
Fecha de Ingreso: octubre-2007
Mensajes: 39
Antigüedad: 12 años, 1 mes
Puntos: 2
Respuesta: Alinear textos en 3 columnas

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
  #6 (permalink)  
Antiguo 28/03/2016, 16:03
 
Fecha de Ingreso: octubre-2007
Mensajes: 39
Antigüedad: 12 años, 1 mes
Puntos: 2
Respuesta: Alinear textos en 3 columnas

Por cierto, sabeis como podria darle un poco mas de separacion vertical entre las provincias? Gracias
  #7 (permalink)  
Antiguo 01/04/2016, 11:59
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 6 años
Puntos: 39
Respuesta: Alinear textos en 3 columnas

Para la separación vertical, prueba usando padding:1em o la medida que quieras.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital
  #8 (permalink)  
Antiguo 05/04/2016, 09:20
 
Fecha de Ingreso: octubre-2007
Mensajes: 39
Antigüedad: 12 años, 1 mes
Puntos: 2
Respuesta: Alinear textos en 3 columnas

Lo probe pero no me ha funcionado. Gracias igualmente

Etiquetas: alinear, columnas, float, textos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 21:44.