HTML: la imagen no se centrará horizontalmente en la página

Question

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

html css

0

liaquore 9 may. 2019 a las 14:29

Answer 1

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

Answer 2

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

Answer 3

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

HTML: la imagen no se centrará horizontalmente en la página

3 respuestas

Nuevas preguntas

html