问如何使用HTML CSS居中显示图像
EN

Stack Overflow用户

提问于 2016-08-07 14:59:57

回答 1查看 51关注 0票数 1

在我添加position: fixed;之前，所有的东西都居中，然后在我添加它之后，它转到了浏览器的左边，如果非常感谢的话，有人能帮我写代码吗？

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: "Raleway",sans-serif;
  font-size: 1em;
  font-weight: bold;
}

#nav {
  background-color: #000f1e;
}

#nav_wrapper {
  width: 960px;
  margin: 0px 0px 0px 115px;
  text-align: left;
}

#nav  ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

#nav  ul li {
  display: inline-block;
}

#nav ul li:hover {
  background-color: #000f1e;

}

#nav ul li a,visited,hover {
  color: white;
  display: block;
  padding: 20px;
  text-decoration: none;
}

#nav ul li a:hover {
  color: #626262;
  text-decoration: none;
}

#nav ul li:hover ul {
  display: block;
}

#nav ul ul {
  display: none;
  position: absolute;
  background-color: #01172c;
  border-bottom:  solid 2px white;
}

#nav ul ul li {
  display: block;
}

#nav  ul ul li  a,visited {
  color: #ccc;
}

#nav ul ul li a:hover {
  color: #626262;
}

#spon {
  background-color: black;

}

#spon_wrapper {
  width: 960px;
  margin: 0px 0px 0px 115px;
  text-align: left;
}

.logo {
  text-align: center;
  position: fixed;
}

#nav {
  z-index: -1;
}

#nav_wrapper {
  z-index: -1;
}

<!DOCTYPE html>
<html>
  <head>
    <title>DeLuzens</title>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <div class="logo">
      <img src="logo.png" style="height: 125px; width: 100px; text-align: center;">
    </div>
    <div id="nav">
      <div id="nav_wrapper">
        <ul>
          <li>
            <a href="#">Home</a></li>
          <li>
            <a href="#">Store</a>
            <ul>
              <li><a href="">Jerseys</a></li>
              <li><a href="">Hoodies</a></li>
              <li><a href="">Shirts</a></li>
              <li><a href="">Headwear</a></li>
              <li><a href="">Accessories</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Roster</a>
            <ul>
              <li><a href="">CS:GO</a></li>
              <li><a href="">Overwatch</a></li>
              <li><a href="">League Of Legends</a></li>
              <li><a href="">Dota 2</a></li>
            </ul>
          </li>
          <li>
            <a href="#">News</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

感谢所有试图帮助我修复代码的人:D

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-07 16:21:56

将固定位置元素居中的一种方法是添加

左: 0；右: 0；

所以css现在看起来应该是这样的

.logo {
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38811749

复制

相似问题

问如何使用HTML CSS居中显示图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML CSS居中显示图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML CSS居中显示图像
EN