Centrar vertical inline y block
Me gustaría que me explicaras como se alinean verticalmente un objeto inline o block en su contenedor.
He visto varias opciones pero son bastante enrrevesadas y pensaba si no hubiera una solución más simple que posicionarlas o añadirles div extras para el vertical align.
1 respuesta
Lo mejor sera que me mandes un poco de código de lo que deseas hacer y así nos aclaramos mejor. Ten claro que lo que no ter servirá es la propiedad vertical-align pues es solo para imágenes.
También puedes mirar la respuesta que di hace unos días en este mismo foro:
<a>http://www.todoexpertos.com/mitodoexpertos/question/931sk19bwhiok/posicionar-un-div-dentro-de-otro</a>
Lo dicho; un poco de código y lo aclaramos.
// Te mando basicamente lo que me gustaría conseguir
#divcontenedor{
display:inline-block;
height:inherit;<br class="pln" />}
input{
// centrar verticalmente con respecto al padre
}
p{
// centrar verticalmente con respecto al padre
}
No se si tienes las ideas muy claras. ¿Qué hace ese <br class="pln" /> en el css? Eso es html. Y además, nunca he visto dar estilos a un <br />. Y que es ese height: ¿Inherit? ¿De dónde heredas esa altura?
¿La pregunta es solamente a nivel teórico o es un caso práctico en que te encuentras? Lo digo porque no me mandas ningún código.
Te diré que los documentos en HTML se van creando en altura a medida que van recibiendo nuevos elementos. De entrada, no hay nada. Nada, ni siquiera body.
Si quieres tener un div con un input centrado en él, pon el el código del contenedor algo así como padding: 25px 0; y entonces el alto del div será 25px+25px+el alto del input (que ya quedará centrado en vertical). Para un <p> es lo mismo.
No sé si te aclaro algo. De todos modos, si estás empezando, hazlo lo ejemplo simples y nio te compliques con disquisiciones teóricas. Cuando te encuentres el problema concreto ya se resolverá.
Perdona por lo del br se abra colado. Si ya se lo de la altura en html, pero mira te mando un código básico para lo del centrado vertical, como me has dicho.
Pero este no me funciona.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<style type="text/css">
#contenedor{
display:inline-block;
width:250px;
height:250px;
border:1px solid red;
padding:25px 0;}
#contenido{
width:100px;
border:1px solid red;
height:200px;}
</style>
</head>
<body>
<div id="contenedor">
<div id="contenido"></div>
</div>
</div>
</body>
</html>
Ya veo. Piensa que la altura que tiene el div contenedor es su height MAS los padding superior e inferior MAS sus bordes. De modo que en realidad te mide 250+25+25+1+1=302px. Y el div contenido te queda a 25 de arriba y por tanto sin centrar.
Para conseguirlo, no pongas ningún alto al div contenedor, deja que el propio flujo del documento lo defina:
<style type="text/css">
#contenedor{
width:250px;
border:1px solid red;
padding:25px 0; }
#contenido{
width:100px;
border:1px solid red;
height:200px;
margin: 0 auto; }
</style>Y quita también el display:inline-block (no lo necesitas para nada)
Para centrarlo horizontalmente, te he puedo el margin: 0 auto; en el contenido (un truco ya muy conocido)
