HTML - image won't center horizontally on page

Question

I have an image as a navigation bar that I wanted centered on the page. It has a fixed position which may be making it so it can't be centered.

HTML & CSS:

.navbar {
    display: block;
    position: fixed;
    top: 0;
    text-align: center;
}

<img src="Images/NavBar.png" alt="" class="navbar" usemap="#navbar-map" />

I have tried center tags, text-align: center, and left: auto; right: auto. None work. What's going wrong?

Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Daan, May 09 '19 at 11:32
Yeah, it needs to be `position: fixed` so it can scroll with the user. — liaquore, May 09 '19 at 11:35

score 2 · Answer 1 · answered May 09 '19 at 11:36

2

try this with position fixed.

left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);

answered May 09 '19 at 11:36

vinay choudhary

174
9

Hien Nguyen · Accepted Answer · 2019-05-09T11:35:04.247

1

You can set

.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" />

edited May 09 '19 at 11:35

answered May 09 '19 at 11:33

Hien Nguyen

24,551
7
52
62

score 1 · Answer 3 · answered May 09 '19 at 11:38

Just place the image inside a container, adding the class directly on the image tag is not a very good idea for future stuff.

.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>

Or use the transformation

.navbar {
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
}

<img src="http://placekitten.com/200/300" alt="" class="navbar" usemap="#navbar-map" />

HTML - image won't center horizontally on page

3 Answers3