in

html – ¿Cómo puedo alinear elementos verticalmente en un div?

apple touch icon@2

Por defecto, h1 es un elemento de bloque y se representará en la línea después de la primera imagen, y hará que la segunda imagen 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 al posicionamiento absoluto del img dentro del div, debe configurar el div contenedor 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 del predeterminado – posición: relativo 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, es posible que desee 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>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

divide and conquer

Estructuras de datos: divide y vencerás

W5sp8NzgbgqWDjMXcocyk5 1200 80

Entrenador y trampas de No Man’s Sky: ¿Es posible hacer trampa en PS4, Xbox One o PC?