Declaración del problema: debe haber visto que al aplicar la propiedad margin:auto a la etiqueta de imagen en la barra de navegación, la imagen del logotipo en la barra de navegación no se centra.
Enfoque: como la etiqueta de imagen en CSS es un elemento en línea, la etiqueta de imagen ocupará solo el espacio que requiere. Entonces, para resolver este problema, hemos asignado la propiedad de visualización de la etiqueta de imagen a «bloquear» y luego le hemos asignado el ancho y la altura adecuados. Asigne el margen a «auto». Verá que la imagen del logotipo ahora está centrada en la barra de navegación.
Código HTML: a continuación se muestra el código para el enfoque anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#navbar {
width: 100vw;
height: 40px;
border: 3px solid white;
border-radius: 15px;
background-color: green;
}
#navbar img {
display: block;
width: 40px;
height: 40px;
margin: auto;
}
</style>
</head>
<body>
<nav id="navbar">
<img src="5.jpeg" alt="Logo image">
</nav>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shahbazalam75508 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA