¿Cómo alinear verticalmente elementos en un div?


792

Tengo un div con dos imágenes y un h1. Todos ellos deben estar alineados verticalmente dentro del div, uno al lado del otro.

Una de las imágenes debe absolutecolocarse dentro del div.

¿Cuál es el CSS necesario para que esto funcione en todos los navegadores comunes?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

14
Hice una lista de todas las formas de alineación vertical ... Voy a dejarla aquí: jsfiddle.net/techsin/FAwku/1
Muhammad Umer

2
Aquí hay dos métodos simples para centrar un elemento dentro de un div, vertical, horizontal o ambos (CSS puro): stackoverflow.com/a/31977476/3597276
Michael Benjamin

1
margin-top: auto y margin-bottom: auto (Funciona para muchos casos).
Tabla paralizada

Respuestas:


932

Wow, este problema es popular. Se basa en un malentendido en la vertical-alignpropiedad. Este excelente artículo lo explica:

Comprensión vertical-align, o "Cómo (no) centrar verticalmente el contenido" por Gavin Kistner.

"Cómo centrarse en CSS" es una gran herramienta web que ayuda a encontrar los atributos de centrado CSS necesarios para diferentes situaciones.


En pocas palabras (y para evitar la pudrición del enlace) :

  • Los elementos en línea (y solo los elementos en línea) se pueden alinear verticalmente en su contexto a través de vertical-align: middle. Sin embargo, el "contexto" no es la altura completa del contenedor principal, es la altura de la línea de texto en la que se encuentran. Ejemplo de jsfiddle
  • Para los elementos de bloque, la alineación vertical es más difícil y depende en gran medida de la situación específica:
    • Si el elemento interior puede tener una altura fija , puede hacer que su posición absolutey especificar su height, margin-topy la topposición. Ejemplo de jsfiddle
    • Si el elemento centrado consiste en una sola línea y su altura principal es fija , simplemente puede configurar el contenedor line-heightpara que complete su altura. Este método es bastante versátil en mi experiencia. Ejemplo de jsfiddle
    • ... hay más casos especiales de este tipo.

142
El problema con las soluciones "válidas" (por lo que no vertical-align: middlees así) es que debe especificar una altura fija. No es muy posible para el diseño web receptivo .
Emilie

1
Tenía esta estructura: <div height = "## px"> Mi texto </ div> Trabajó para mí, establezca la propiedad lineHeight usando el mismo valor que el utilizado en la propiedad de altura div: '## px' (## porque este valor es dinámico en mi caso) gracias
patricK

8
Esto también funciona con inline-blocky table-cellelementos. Si tiene problemas con esto, intente ajustar line-heightel elemento contenedor (es decir, el contexto) ya que se usa en los vertical-aligncálculos del cuadro de línea.
Alex W

1
css-tricks.com/centering-css-complete-guide <- algunas buenas opciones presentadas aquí, me he encontrado recurriendo a la solución table / table-cell la mayor parte del tiempo sin embargo
shaunhusain

1
¡Esta herramienta (howtocenterincsss.com) es bastante increíble porque funcionó de inmediato dentro de mi CSS existente! Eso es super raro. Recuerde los viejos tiempos donde tenía que copiar hojas de estilo completas de algún ejemplo, a veces incluso el HTML del ejemplo y luego eliminar y cambiar el nombre de los elementos uno tras otro hasta que sea lo que necesitaba. ¡No es el caso de este sitio!
konstantin

190

Ahora que el soporte de flexbox está aumentando, este CSS aplicado al elemento contenedor centraría verticalmente el elemento contenido:

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

Use la versión prefijada si también necesita apuntar a Explorer 10 y navegadores Android antiguos (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Una buena solución, gracias. ¿Puede sugerir cómo hacer que flexbox muestre una barra de desplazamiento horizontal, en caso de que el elemento interno sea más grande que el contenedor? (Estoy tratando de hacer que el elemento interno se pueda ampliar / desplazar dentro del contenedor, como lienzo en powerpoint)? ¿Es posible en absoluto?
Boris Burkov, el

1
@YazidErman, esta solución depende de Flexbox, así que no, solo IE 10 y superior son compatibles o cualquier otro navegador moderno caniuse.com/#search=flexbox Flexbox es excelente donde es compatible, pero no está en todas partes. La tabla de visualización y la celda de la tabla son probablemente la mejor solución realmente, el contenedor solo necesita ser una tabla, el elemento centrado está envuelto en un elemento con la celda de la tabla de visualización y luego puede centrarse como otras respuestas aquí señalan.
shaunhusain

1
¿Por qué fue tan difícil para mí encontrar>. <Gracias por la respuesta! Puedo confirmar que esto funciona para mí en un escenario donde otra respuesta no funcionó.
Michael McKenna

1
Guía útil de trucos CSS en flexbox, luego mire la align-itemssección
icc97

1
En 2020 podemos usar flexbox caniuse.com/#feat=flexbox
tonygatta

116

Usé este código muy simple:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Obviamente, ya sea que use a .classo an #id, el resultado no cambiará.


3
Aquí hay un ejemplo completo de las nueve posibilidades de alineaciones (superior-media-inferior e izquierda-centro-derecha): jsfiddle.net/webMac/0swk9hk5
webMac

En 2020 podemos usar flexbox caniuse.com/#feat=flexbox
tonygatta

funciona perfecto para mí
huynq0911

49

A mí me funcionó:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

99
¿Entonces ya no es el elemento "bloque"?
Pacerier

77
Entonces, si desea alinearse horizontalmente margin : 0 auto, no funcionará debido a ladisplay: table-cell
Ortomala Lokni

48
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

77
Creo que esta solución es la más rápida y fácil de entender. Quizás es porque no fui lo suficientemente paciente como para asimilar la respuesta seleccionada. Flexbox todas las cosas!
modulitos

1
La adición de justify-content: centersolucionó mi falta de centrado horizontal
Samuel Slade

22

Una técnica de un amigo mío:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO aquí


1
esta técnica se describe con más detalle aquí: css-tricks.com/centering-in-the-unknown
nerdess

18

Para colocar elementos de bloque en el centro (funciona en IE9 y superior), necesita un contenedor div:

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

2
Este método puede hacer que los elementos estén borrosos debido a que el elemento se coloca en un "medio píxel". Una solución para esto es establecer la perspectiva del elemento. transform: perspectiva (1px) translateY (-50%);
Simon

16

Todos ellos deben estar alineados verticalmente dentro del div.

Alineado cómo ? ¿Las partes superiores de las imágenes están alineadas con la parte superior del texto?

Una de las imágenes debe estar posicionada de manera absoluta dentro del div.

Absolutamente posicionado en relación con el DIV? ¿Quizás podrías esbozar lo que estás buscando ...?

fd ha descrito los pasos para el posicionamiento absoluto, así como para ajustar la visualización del H1elemento de modo que las imágenes aparezcan en línea con él. A eso, agregaré que puedes alinear las imágenes usando el vertical-alignestilo:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... esto pondría el encabezado y las imágenes juntas, con los bordes superiores alineados. Existen otras opciones de alineación; consulte la documentación . También puede resultarle beneficioso soltar el DIV y mover las imágenes dentro del H1elemento; esto proporciona un valor semántico al contenedor y elimina la necesidad de ajustar la visualización de H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

15

Use esta fórmula, y funcionará siempre sin grietas:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>


2
Nunca he visto en CSS este tipo de selector "#outer [id]". ¿Qué debería hacer eso? ¿Qué pasa si tendré clase en lugar de id?
Alexa Adrian

12

Casi todos los métodos necesitan especificar la altura, pero a menudo no tenemos alturas.
Así que aquí hay un truco de 3 líneas de CSS3 que no requiere conocer la altura.

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

Es compatible incluso en IE9.

con sus prefijos de proveedor:

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

Fuente: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/


pero esto parece funcionar solo cuando la altura del elemento primario es fija. la propiedad 'top' con valor porcentual solo funciona en el contenedor con altura fija, ¿correcto?
ucdream

Sí, funciona solo en algunos casos, tuve problemas más tarde con estos métodos ... Lo importante es tener la mayor cantidad de posibilidades posible y tan pronto como necesite una, las probará todas hasta obtener la buena, porque todos los métodos tengo cosas que no funcionan en un caso específico ...
Shadoweb

12

De dos maneras, puede alinear elementos vertical y horizontalmente

  1. Bootstrap 4
  2. CSS3

ingrese la descripción de la imagen aquí

1. Bootstrap 4.3.X

para alineación vertical: d-flex align-items-center

para alineación horizontal: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>


1
Ambas formas son básicamente las mismas ya que Bootstrap usa los mismos atributos flexibles en sus clases.
Mx.

Bootstrap no es mágico. Está sujeto a las mismas limitaciones de CSS que afectan a todos. Solo está ocultando lo que hace del promedio. usuario.
JasonGenX

10

Mi truco es poner dentro del div una tabla con 1 fila y 1 columna, establecer el 100% del ancho y alto, y la propiedad vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Violín: http://jsfiddle.net/joan16v/sbqjnn9q/


77
Esta parece ser la mejor manera de evitar rascarse la cabeza. Todavía estoy confundido sobre por qué CSS no tiene un estándar de alineación vertical.
Kokodoko

5

# 3 formas de hacer que el div de centro infantil en un div padre

  • Método de posicionamiento absoluto
  • Método Flexbox
  • Método de transformación / traducción

    ingrese la descripción de la imagen aquí

    Manifestación

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>


4

Usando CSS en el centro vertical, puede dejar que los contenedores externos actúen como una tabla y el contenido como una celda de tabla. En este formato, sus objetos permanecerán centrados. :)

Anidé varios objetos en JSFiddle como ejemplo, pero la idea central es la siguiente:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

El ejemplo de objetos múltiples:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Resultado

Resultado

https://jsfiddle.net/martjemeyer/ybs032uc/1/


3

Por defecto, h1 es un elemento de bloque y se representará en la línea después de la primera img, y hará que la segunda img aparezca en la línea que sigue al bloque.

Para evitar que esto ocurra, puede configurar el h1 para que tenga un comportamiento de flujo en línea:

#header > h1 { display: inline; }

En cuanto a posicionar absolutamente el img dentro del div , debe configurar el div que lo contiene para que tenga un "tamaño conocido" antes de que esto funcione correctamente. En mi experiencia, también necesita cambiar el atributo de posición lejos de la posición predeterminada: position: relative funciona para mí:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Si puede hacer que eso funcione, puede intentar eliminar progresivamente los atributos de altura, ancho y posición de div.header para obtener los atributos mínimos necesarios para obtener el efecto que desea.

ACTUALIZAR:

Aquí hay un ejemplo completo que funciona en Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

44
Debo señalar que tener el DOCTYPE correcto a veces puede hacer grandes diferencias en la forma en que se representará CSS, especialmente en Internet Explorer. Le recomiendo que elija un DOCTYPE que se sepa que se alinea con un modo de estándares estrictos para que pueda esperar un comportamiento más consistente entre los navegadores.
Mike Tunnicliffe

2
No 'esperaría' ninguna consistencia entre los navegadores ... la única forma de estar seguro es probar: /
Cocowalla

3

Podemos usar un cálculo de función CSS para calcular el tamaño del elemento y luego colocar el elemento hijo en consecuencia.

HTML de ejemplo:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Y CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo creada aquí: https://jsfiddle.net/xnjq1t22/

Esta solución funciona bien con responsive div heighty widthtambién.

Nota: La función calc no se prueba para compatibilidad con navegadores antiguos.


3

Según hoy, he encontrado una nueva solución para alinear verticalmente varias líneas de texto en un div usando CSS3 (y también estoy usando el sistema de cuadrícula bootstrap v3 para embellecer la interfaz de usuario), que es la siguiente:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Según tengo entendido, el elemento primario inmediato del texto que contiene el elemento debe tener cierta altura. Espero que te ayude también. ¡Gracias!


Solución muy limpia. Este me funcionó muy bien.
Akalonda

2

Mi nueva forma favorita de hacerlo es con una cuadrícula CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>


1

¡Solo usa una tabla de una celda dentro del div! Simplemente configure la altura de la celda y la tabla con 100% y puede usar la alineación vertical.

¡Una tabla de una celda dentro del div maneja la alineación vertical y es compatible con versiones anteriores de la Edad de Piedra!


0

He estado usando la siguiente solución (sin posicionamiento y sin altura de línea) desde hace más de un año, también funciona con IE 7 y 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

0

Esta es mi solución personal para un elemento i dentro de un div

JSFiddle Ejemplo

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

0

Para mí, funcionó de esta manera:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

El elemento "a" se convirtió en un botón, usando clases Bootstrap, y ahora está centrado verticalmente dentro de un "div" externo.


0

usando display flex, primero debe envolver el contenedor del elemento que desea alinear.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

luego aplique el siguiente CSS para envolver div o outdiv en mi ejemplo

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}

Las respuestas de solo código se desaconsejan. Agregue alguna explicación sobre cómo esto resuelve el problema o cómo difiere de las respuestas existentes. De la opinión
Nick

-3

Sólo esta:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

¡Una tabla de una celda dentro del div maneja la alineación vertical y es compatible con versiones anteriores de la Edad de Piedra!


-3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

-4

Aquí hay otro enfoque (receptivo):

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/


-4

Soy un tipo .NET que acaba de ingresar a la programación web. No usé CSS (bueno, un poco). Usé un pequeño JavaScript para lograr el centrado vertical junto con la función .css de jQuery.

Solo estoy publicando todo desde mi prueba. Probablemente no sea demasiado elegante, pero funciona hasta ahora.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

77
Estás enseñando a los nuevos desarrolladores web cómo hacer las cosas mal, HTML es para definir contenido, CSS es para diseñar el HTML y JavaScript es para manipular ambos en tiempo de ejecución dependiendo de las condiciones. Mezclarlos puede conducir rápidamente a espaguetis y código intensivo en rendimiento
OverCoder

-8
<div id="header" style="display: table-cell; vertical-align:middle;">

...

o CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Cobertura del navegador


1
La propiedad de alineación vertical no se aplica ya que el div es display: block de forma predeterminada y parece que no se ha hecho nada para cambiarlo.
Quentin

3
Aparentemente, la pantalla se actualizó table-cell, lo que hace que vertical-align: middle;funcione. Aún mejor, funciona sin necesidad de un contenedor anidado / buffer div, y funciona tanto para texto como para imágenes (o ambos), y no necesita cambiar las propiedades de posición.
MSpreij

3
Este funciona. Cambia la visualización a table-cell que toma la propiedad de alineación vertical. No tengo idea de por qué la gente vota por esto.
texasbruce

1
Sí, hasta donde sé, esta es la forma menos intrusiva de centrar cualquier cosa verticalmente en un div. +1
Pma

Ok, tal vez fui demasiado rápido con mis conclusiones ... Agregar pantalla: el margen div de las divisiones de la celda de la tabla y el borde adicional se muestran fuera del div, el borde combinado con las pantallas de radio del borde muestra las esquinas redondeadas dentro del div en lugar de afuera
Pma
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.