Question

我对如何获得100％居中元素感到困惑。

我正在尝试使用宽度略大于居中水平菜单的灰色背景。我希望灰色背景到达页面顶部到页面底部。在测试代码时，它将改变菜单对齐的方式，而不是将菜单置于屏幕/页面和背景的中心。

我编辑了代码以更好地显示问题（第4次修改）

＆＃13;

html {
  background-color: rgba(255, 216, 0, 0.4);
}
a {
  float: left;
  width: 8em;
  text-decoration: none;
  color: white;
  background-color: #0094ff;
  padding: 0.2em 0.4em;
  border-right: 1px solid white;
}
a:hover {
  background-color: #b6ff00;
}
li {
  display: inline;
  background-color: #ff0000;
}
div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.table {
  position: relative;
  margin: auto;
  width: 50%;
}
#horizontal-list {
  background-color: #808080;
  padding: 5em;
  height: auto;
  width: 75%;
}
body {
  margin: 0;
  padding: 0;
}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <link rel="stylesheet" type="text/css" href="Sitestyles.css">
  <title>blahblah</title>
</head>

<body>
  <div id="container">
    <div class="table">
      <div class="menubg">
        <ul id="horizontal-list">
          <li>
            <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

将此添加到您的代码中以避免上边距中的差距：

merge(d1, d2)
# t1  t2 numVehicles avgByRunRep avgLostPerRep
#1: 0.2 0.3          10    225.5000     14.333333
#2: 0.2 0.4          10    219.6667      9.000000
#3: 0.2 0.5          10    205.1667      8.000000
#4: 0.2 0.6          10    220.6667      8.000000
#5: 0.2 0.7          10    205.1667      6.833333

Answer 2

也许是这样？

*{
    margin: 0;
    padding: 0;     
}

html {
    background-color: rgba(255, 216, 0, 0.4);
}

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.table {
    position: relative;
    margin: auto;
    width: 50%;
}
.menubg {}
.menubg > ul {
    text-align: center;    
    background-color: #808080;
    padding: 5em;    
    height: auto;
    width: 75%;    
}
.menubg > ul > li {
    display: inline-block;
    vertical-align: top;
    background-color: #ff0000;
    font-size: 15px;
}
.menubg > ul > li a {
    display: block;
    width: 8em;
    text-decoration: none;
    color: white;
    background-color: #0094ff;
    padding: 0.2em 0.4em;
    border-right: 1px solid white;
}
.menubg > ul > li a:hover {
    background-color: #b6ff00;
}

<div id="container">
    <div class="table">
        <div class="menubg">
            <ul id="horizontal-list">
                <li> <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a></li><li> <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a></li><li> <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a></li><li> <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a></li><li> <a href="#">
              <img src="image.png" onmousedown="return false;" alt="Something" />
            </a></li>
            </ul>
        </div>
    </div>
</div>

将居中菜单的背景居中到页面

2 个答案: