Question

我有一个图像希望作为导航条放在页面的中心。它有一个固定的位置，因此可能无法居中。

HTML和CSS：

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

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

我尝试了中心标记text-align: center和left: auto; right: auto。没有工作。怎么了？

Answer 1

尝试使用固定位置进行操作。

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

Answer 2

您可以设置

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

Answer 3

仅将图像放置在容器中，将类直接添加到图像标签上对于将来的工作不是一个好主意。

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

或使用转换

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

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

HTML-图片不会在页面上水平居中

3 个答案: