CSS: ¿Texto central tanto horizontal como vertical?

Im creando un nuevo sitio web y necesito saber algo (se mostrará con el ejemplo).CSS: ¿Texto central tanto horizontal como vertical?

Digamos que hice esto:

html;

<div id="center-in-bar"> 
    <ul> 
     <li>content..</li> 
     <li>content..</li> 
     <li>content..</li> 
     <li>content..</li> 
</div>

y CSS:

#center-in-bar { 
    list-style:none; 
    display:inline-block; 
    /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/ 
}

¿Qué hago para que todos los elementos li centradas tanto horizontal como vertical? En el elemento central en barra?

Cualquier ayuda appriciated :))

Fuente

2011-11-18 Stian Olsen

centrado vertical no es una tarea muy fácil y el acercamiento a acheiving que depende de cierto criterio (hay algunos métodos diferentes pero cada uno tiene condiciones). –

probar este fragmento de CSS:

#center-in-bar ul { 
    ... 
    text-align:center; /* center horizontally */ 
    vertical-align:middle; /* center vertically */ 
    ... 
} 
#center-in-bar li { 
    ... 
    display:inline; /* you might want to use this instead of "inline-block" */ 
    ... 
    text-align:center; /* center horizontally */ 
    vertical-align:middle; /* center vertically */ 
    ... 
}

Fuente

2011-12-12 15:55:56

De alguna manera, todavía no hay un estándar para hacer esto, pero en mi experiencia, la siguiente es probablemente la solución más fiable general:

<style type="text/css"> 
    #container {  
     display:table;  
     border-collapse:collapse; 
     height:200px; 
     width:100%; 
     border:1px solid #000; 
    }   
    #layout {  
     display:table-row;  
    }    
    #content {  
     display:table-cell; 
     text-align:center; 
     vertical-align:middle;  
    }    
</style>  
<div id="container">  
    <div id="layout">  
     <div id="content"> 
      Hello world! 
     </div>  
    </div>  
</div>

Aquí es otra técnica que utiliza el posicionamiento relativo y absoluto para simular la posición central centrada. Esta técnica no es exacta, pero debe ser compatible con cualquier navegador (incluso los primeros):

<style type="text/css"> 
    #vertical{ 
     position:absolute; 
     top:50%; /* adjust this as needed */  
     left:0; 
     width:100%; 
     text-align:center; 
    } 
    #container { 
     position:relative; 
     height:200px; 
     border:1px solid #000; 
    } 
</style>   
<div id="container"> 
    <div id="vertical"> 
     Hello world! 
    </div>    
</div>

Nota importante:

Cuando esta pregunta se pidió a alguien siempre parece sugerir line-height como solución, pero le imploro que evite esa sugerencia. Se ve bien cuando estás demostrando algo simple como "Hello World", pero line-height se rompe horriblemente cuando el texto se ajusta.

Fuente

2011-11-18 18:32:36

Debe tener en cuenta que el método 'table-cell' no funciona en ciertas versiones de IE. – Sparky

gracias, ayudó mucho :) –

No hay problema. No olvide marcar la respuesta si está satisfecho. –

COMO ELEMENTO DE horizontal Centro UN BLOQUE (como un DIV) o el artículo en línea (como un texto)

Digamos que usted quiere centrar un documento en una página del navegador, por lo que no importa lo grande que se cambia el tamaño su navegador el elemento siempre está centrada:

body { 
    margin:50px 0px; padding:0px; 
    text-align:center; 
    } 

    #Content { 
    width:500px; 
    margin:0px auto; 
    text-align:left; 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
    }

escribir este código HTML para centrar horizontalmente en algo entre las etiquetas del cuerpo:

<body> 
<div id="Content">I am a centered DIV</div> 
</body>

Esto horizontalmente centrará los elementos de nivel del bloque. Para centrar texto, luces, u otros elementos en línea todo lo que se necesita es añadir:

#Content { 
    width:500px; 
    margin:0px auto; 
    text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 

    }

COMO verticalmente CENTRO Un bloque de elemento (como un DIV) o el artículo en línea (como un texto)

Nota: No use la altura de línea para centrar verticalmente los elementos, ya que solo funcionará para una línea de texto y nada más.

En cuanto a los elementos de centrado vertical, hay 3-5 métodos que puede usar dependiendo de qué está tratando de centrar.

Este sitio describe cada método fácil para usted: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

mejor de las suertes!

Fuente

2011-11-18 19:31:38 Downpour046

Debe dar mismo valor a la línea de la altura y la altura.

#center-in-bar li 
{ 
height: 30px 
line-height: 30px; 
text-align: center;}

también un vistazo a esto: Text align vertical within li

Fuente

2012-05-25 11:50:11 efirat

CSS: ¿Texto central tanto horizontal como vertical?

Respuesta

Cuestiones relacionadas