[SOLUCIONADO] Centrar texto en columnas Bootstrap

[sergio17791]

Hola a todos!

Estoy realizando un proyecto web ayudándome de Bootstrap para que se adapte fácilmente a todos los dispositivos, pero soy un poco novato en su uso. Mi problema es que necesito alienar horizontalmente los elementos del encabezado de la página para que no quede feo, sin perder las propiedades de bootstrap al reducir el tamaño. Por ahora tengo el siguiente código:

Mí código html:

Código HTML:

<header>
   <div class="container">
         <div id="titulo" class="col-xs-12 col-md-3">
               <h1>HPG-Aligner</h1>
         </div>
         <div id="logoUniversitatValencia" class="col-xs-12 col-md-4">
              <img src="imagenes/universitatValencia.png" class="img-responsive" alt="Universitat de València">
         </div>                
         <div id="usuarioRegistrado" class="col-xs-12 col-md-3 col-md-offset-2">
               <p>Ningún usuario logueado.</p> 
         </div>                               
   </div>
</header> 

Mi código CSS (además del código original de Bootstrap):

Código:

body
{
    background-color: white !important; 
}

header
{
    background-color: #202020  !important;  
}

#titulo 
{
    color: white;
}


#usuarioRegistrado
{
    color: white;
}

El resultado que tengo ahora mismo es este, necesito que los elementos del encabezado estén centrados horizontalmente.

[petit89]

tienes que ocupar col-XX-offset-X, en la primera celda del titulo, tal como lo hiciste en la ultima, donde las azules son la escala y el rojo las celdas que se correra a la derecha, podria ser algo como:

Código HTML:

<div id="titulo" class="col-xs-12 col-md-3 col-md-offset-2">
               <h1>HPG-Aligner</h1>
         </div>
 

Claro que despues debes arreglar la ultima celda de usuario registrado ya que se correra todo, otra opción seria meter todo en una sola div y darle text-aling center o right en todo caso. como tu quieras y sientas mas facil la tarea

[sergio17791]

Iniciado por petit89

tienes que ocupar col-XX-offset-X, en la primera celda del titulo, tal como lo hiciste en la ultima, donde las azules son la escala y el rojo las celdas que se correra a la derecha, podria ser algo como:

Código HTML:

<div id="titulo" class="col-xs-12 col-md-3 col-md-offset-2">
               <h1>HPG-Aligner</h1>
         </div>
 

Claro que despues debes arreglar la ultima celda de usuario registrado ya que se correra todo, otra opción seria meter todo en una sola div y darle text-aling center o right en todo caso. como tu quieras y sientas mas facil la tarea

Perdón, cuando escribí el tema me estaban molestando en casa y me confundí, quería decir alinear VERTICALMENTE

Gracias por tu respuesta!

[rodrypaladin]

No te hace falta Bootstrap para eso. con flexbox puedes hacerlo y muy fácil.

Solamente tienes que definir en el contenedor padre:

Código CSS:

display: flex;
align-items: center;
 

Con align-items: center centramos verticalmente todo lo que se encuentre dentro de ese contenedor padre

[Rafael]

rodrypaladin ya se volvió un promotor del flexbox.

[sergio17791]

No me funciona, he probado a poner el código en el CSS del header y luego en el CSS de cada elemento individual, como #usuarioRegistrado, pero no me funciona.

Estoy programando con Netbeans y me decía en align-items unknow property

[rodrypaladin]

Código CSS:

header .container {
    display: flex;
    align-items: center;
}
 

El contenedor padre es el <div class="container"> ... </div> y con el código css que puse te centra verticalmente los 3 elementos que hay en su interior. que son los 3 divs de dentro

Puedes ver el ejemplo en vivo aquí: Demo de align-items flexbox

Iniciado por sergio17791

Estoy programando con Netbeans y me decía en align-items unknow property

Las propiedades de flexbox a mi en mi editor SublimeText tampoco me las identifica o colorea bien, pero si que funcionan, ya lo ves en el ejemplo

Ya te digo @Rafael me enseñaste un nuevo mundo del que no quiero salir XD

[sergio17791]

Iniciado por rodrypaladin

Código CSS:

header .container {
    display: flex;
    align-items: center;
}
 

El contenedor padre es el <div class="container"> ... </div> y con el código css que puse te centra verticalmente los 3 elementos que hay en su interior. que son los 3 divs de dentro

Puedes ver el ejemplo en vivo aquí: [URL="https://jsfiddle.net/Rodrypaladin/k2mbL2rd/"]Demo de align-items flexbox[/URL]



Las propiedades de flexbox a mi en mi editor SublimeText tampoco me las identifica o colorea bien, pero si que funcionan, ya lo ves en el ejemplo

Ya te digo @Rafael me enseñaste un nuevo mundo del que no quiero salir XD

Eso me funciona, me lo centra todo bien (creo que llegué a hacer algo parecido en una de las pruebas), pero tengo el siguiente problema. Haciéndolo de esa forma, pierdo la "adaptabilidad" para dispositivos pequeños de Bootstrap. Cuando tengo un dispositivo pequeño, con ese código CSS, es resultado es el siguiente:



Y yo necesito que quede así, que es la razón por la que uso Bootstrap:



¿Sabéis de alguna solución? Si no intentaré hacer algo con JavaScript

[rodrypaladin]

Una gran cualidad de flexbox es que con el puedes hacer los sitios responsive. Añade también lo siguiente al código que ya te puse:

Código CSS:

flex-direction: row;
flex-wrap: wrap;
 

O lo que es lo mismo pero más simplificado:

Código CSS:

flex-flow: row wrap;
 

Con flex-direction: row le diremos que coloque el contenido del contenedor padre en fila, en tu caso pondrá un div, luego el otro y luego el otro en la misma fila. Y con flex-wrap: wrap le decimos que al no caber uno de los elementos ( tus divs ) lo ponga automáticamente abajo, de esta manera al verlod esde el móvil por ejemplo se verá un div de bajo de otro

Echa un ojo a todo lo que puedes lograr con flexbox

tu código tendría que quedar de esta manera:

Código CSS:

header .container {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
 

Seguro que te servirá

[xfxstudios]

Checha esto: http://codepen.io/xfxstudios/pen/rLeqoe

Te puede servir Saludos y es aplicando el line-height para establecer el ancho del div con el mismo interlineado del texto, ve la muestra. Saludos

[sergio17791]

Iniciado por rodrypaladin

Una gran cualidad de flexbox es que con el puedes hacer los sitios responsive. Añade también lo siguiente al código que ya te puse:

Código CSS:

flex-direction: row;
flex-wrap: wrap;
 

O lo que es lo mismo pero más simplificado:

Código CSS:

flex-flow: row wrap;
 

Con flex-direction: row le diremos que coloque el contenido del contenedor padre en fila, en tu caso pondrá un div, luego el otro y luego el otro en la misma fila. Y con flex-wrap: wrap le decimos que al no caber uno de los elementos ( tus divs ) lo ponga automáticamente abajo, de esta manera al verlod esde el móvil por ejemplo se verá un div de bajo de otro

Echa un ojo a todo lo que puedes lograr con [URL="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"]flexbox[/URL]

tu código tendría que quedar de esta manera:

Código CSS:

header .container {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
 

Seguro que te servirá

Te quiero tío, no sabes cuanto, me funcionó perfectamente! Me has salvado el culo! Mil gracias de verdad.

Iniciado por xfxstudios

Checha esto: [url]http://codepen.io/xfxstudios/pen/rLeqoe[/url]

Te puede servir Saludos y es aplicando el line-height para establecer el ancho del div con el mismo interlineado del texto, ve la muestra. Saludos

Gracias por tu respuesta, cuando tenga tiempo lo revisaré, y también el flexbox que dice rodrypaladin.

[rodrypaladin]

jajajaja de nada, bienvenido al maravilloso mundo de flexbox por cortesía de @Rafael que fue quien me llevó al lado oscuro de la fuerza

Una vez se ponga un item de bajo de otro por medio de flex-wrap: wrap, puedes ajustar todavía más el diseño por medio de medias queries, sólo si ves que quieres cambiar estilos justo en ese momento, yo lo hago y queda muy bien

[sergio17791]

Iniciado por rodrypaladin

jajajaja de nada, bienvenido al maravilloso mundo de flexbox por cortesía de @Rafael que fue quien me llevó al lado oscuro de la fuerza

Una vez se ponga un item de bajo de otro por medio de flex-wrap: wrap, puedes ajustar todavía más el diseño por medio de medias queries, sólo si ves que quieres cambiar estilos justo en ese momento, yo lo hago y queda muy bien

Vale, le echaré un ojo también a ver que se puede hacer con ello