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

0
liaquore 9 may. 2019 a las 14:29

3 respuestas

La mejor respuesta

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" />
1
Hien Nguyen 9 may. 2019 a las 11:35

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" />
1
Aslam 9 may. 2019 a las 11:38

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%);
2
vinay choudhary 9 may. 2019 a las 11:36