html - vertically - vertical align not working

div vertical alinear css medio

Question

Intento que mi texto se alinee verticalmente con el medio del div del abc div solamente.

Quiero mantener la altura en 50px y texto para alinear verticalmente en el medio de la div.

Todavía tengo que encontrar una solución a este problema, tal vez no estoy buscando las cosas correctas.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Answer 1

¡Vieja pregunta, pero hoy en día CSS3 hace que la alineación vertical sea realmente simple !

Simplemente agregue a #abc el siguiente css:

display:flex;
align-items:center;

Demo simple

Demo original de la pregunta updated

Ejemplo simple:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Answer 2

¿Qué hay de agregar line-height ?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Violín, altura de línea

O padding en #abc . Este es el resultado con relleno

Actualizar

Agregue su css:

#abc img{
   vertical-align: middle;
}

El resultado Espero esto es lo que estás buscando.

Answer 3

Encontré esta solución de Sebastian Ekström. Es rápido, sucio y funciona realmente bien. Incluso si no sabes la altura de los padres:

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Lea el artículo completo here .

Answer 4

Es simple: dale al padre div esto:

display: table;

y déle al niño div (s) esto:

display: table-cell;
vertical-align: middle;

¡Eso es!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Answer 5

Este código es para alineación central vertical y centro medio:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Answer 6

Prueba esto:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Otro método para centrar un div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Answer 7

Puede usar line-height: 50px; , no necesitarás vertical-align: middle; ahí.

Demo

Lo anterior fallará si tiene varias líneas, por lo que en ese caso puede envolver su texto usando span y luego usar display: table-cell; y display: table; junto con vertical-align: middle; , también no te olvides de usar el width: 100%; para #abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

Otra solución que puedo pensar aquí es usar la propiedad de transform con translateY() donde Y obviamente significa eje Y. Es bastante sencillo ... Todo lo que tienes que hacer es establecer la posición de los elementos en absolute y luego posicionarte al 50% desde la top y traducir desde su eje con negativo -50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

Tenga en cuenta que esto no será compatible con navegadores más antiguos, por ejemplo, IE8, pero puede hacer que IE9 y otras versiones anteriores de navegador de Chrome y Firefox utilicen los -ms, -moz -webkit y -webkit respectivamente.

Para obtener más información sobre la transform , puede consultar here .

Answer 8

Puede usar la altura de la línea como la altura del div. Pero para mí la mejor solución es esta -> position:relative; top:50%; transform:translate(0,50%); position:relative; top:50%; transform:translate(0,50%);