Tengo una imagen como barra de navegación que quería centrada en la página. Tiene una posición fija que puede estar haciendo que no se pueda centrar.
HTML y CSS:
.navbar {
display: block;
position: fixed;
top: 0;
text-align: center;
}
<img src="Images/NavBar.png" alt="" class="navbar" usemap="#navbar-map" />
He probado las etiquetas centrales, text-align: center
y left: auto; right: auto
. Ninguno funciona Que va mal
3 respuestas
Puedes configurar
.navbar {
display: block;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
.navbar {
display: block;
position: fixed;
left: 50%;
transform: translateX(-50%);
}
<img src="https://i.pinimg.com/originals/44/cd/cb/44cdcb484a8febd81c1784cb11a96c7b.jpg" alt="" class="navbar" usemap="#navbar-map" />
Simplemente coloque la imagen dentro de un contenedor, agregar la clase directamente en la etiqueta de la imagen no es una muy buena idea para cosas futuras.
.navbar {
display: block;
top: 0;
text-align: center;
margin: 0 auto;
}
.navbar-container {
position: fixed;
left: 0;
right: 0;
background: #ddd;
height: 300px;
}
<div class="navbar-container">
<img src="http://placekitten.com/200/300" alt="" class="navbar" usemap="#navbar-map" />
</div>
O usa la transformación
.navbar {
left: 50%;
transform: translateX(-50%);
position: fixed;
}
<img src="http://placekitten.com/200/300" alt="" class="navbar" usemap="#navbar-map" />
Intente esto con la posición fija.
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].