1

Creo que la mejor manera de que entiendan mi problema es que, en primer lugar, lo vean en sus navegadores. Así, he reducido el código (era bastante) al mínimo posible para su fácil estudio, omitiendo hojas de estilos (entre otras cosas). Aquí el código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Papelería María</title>

    <style type="text/css">
        
        #login img{
            width: 40x;
            height: 40px;
        }
        
    </style>
    
</head>

<body>
        
    <div id="login">
        <p align="right"><img src="imagenes/login.png" alt="login" align="right"/>Iniciar Sesión</p>
    </div>
    
    <div id="cabecera">
        
    <p id="titulo">PAPELERÍA MARÍA</p>
    <ul id="nav">
        <li id="home"><a href="index.html">Home</a></li>
        <li id="libros"><a href="libros.html">Libros</a></li>
        <li id="pagina_3"><a href="pagina_3.html">Página_3</a></li>
        <li id="pagina_4"><a href="pagina_4.html">Página_4</a></li>
    </ul>
    </div>
    
    <div id="hoja">
        <div id="ofertas">
            <!--Aquí iría el contenido de la página, irrelevante para el caso-->
        </div>
    </div>
    
    <footer>
        <!--Aquí iría información de contacto, irrelevante para el caso-->
    </footer>
    
</body>
    
</html>

Como puede observarse, hay un div con id="login" que pretende ser una composición de un mensaje ("Iniciar Sesión") y una imagen que representa a la imagen de usuario.

Mi problema es que la línea horizontal media del texto no queda alineada con la línea horizontal media de la imagen, es decir, que texto e imagen no están alineados. ¿Cómo alineo ambos elementos?

Esto me lleva a un problema que me he encontrado en más de una ocasión. ¿Por qué, cuando creo un div con una imagen dentro, el tamaño del div, si no toco nada, no engloba a la imagen? Si la altura de la imagen es mayor a la del div, el div no reajusta su altura a la de la imagen, observable en este proyecto también.

Estos serían los dos problemas que me asaltan en este ejercicio. Gracias :)

0

1 respuesta 1

1

Para alinear los elementos dentro de un div puedes usar CSS, la propiedad seria display:flex. Muestro un ejemplo.

#login{
display:flex;
justify-content: center;
align-items:center;
}

p{
padding: 10px;
}
<div id="login">
  <img src="http://lorempixel.com/400/200/sports/1/">
  <p>texto</p>
</div>

La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento. https://developer.mozilla.org/es/docs/Web/CSS/flex

El código de ejemplo funciona de la siguiente manera:

  • Se declara la propiedad display:flex en el div padre.
  • La siguiente propiedad: justify-content:center centra horizontalmente los elementos hijos del div.
  • Y la propiedad align-items:center centra verticalmente los elementos hijos del div.

Espero que esto te haya servido de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.