垂直对齐问题

Question

我正在尝试将某些内容垂直居中，但遇到了很大的困难。

我已经让我的 SVG 很好地居中，但是我已经尝试让我的 Unorderlist 保持一致大约一个小时了。

我真的不确定要显示我的代码的哪些部分，所以我想我会显示所有代码。

body {
  background-color: #eeeeee;
  text-align: center;
}
#AElogo {
  width: 100px;
  display: block;
  margin: auto;
  padding-bottom: 4px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.btn {
  height: 42px;
  width: 20px;
  display: inline-block;
  border: none;
}
.b1 {
  background-color: #581845;
  box-shadow: 0 8px #4f163e;
}
.b2 {
  background-color: #900c3f;
  box-shadow: 0 8px #810b39;
}
.b3 {
  background-color: #c70039;
  box-shadow: 0 8px #b30033;
}
.b4 {
  background-color: #ff5733;
  box-shadow: 0 8px #e54e2e;
}
.b5 {
  background-color: #ffc305;
  box-shadow: 0 8px #e5af04;
}
.b1:hover {
  box-shadow: 0 4px #4f163e;
  transform: translateY(4px);
}
.b2:hover {
  box-shadow: 0 4px #810b39;
  transform: translateY(4px);
}
.b3:hover {
  box-shadow: 0 4px #b30033;
  transform: translateY(4px);
}
.b4:hover {
  box-shadow: 0 4px #e54e2e;
  transform: translateY(4px);
}
.b5:hover {
  box-shadow: 0 4px #e5af04;
  transform: translateY(4px);
}
#listrunk {
  font-size: 0px;
  padding-left: 0px;
}
.listleaf {
  display: inline-block;
}
#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 30%;
  margin: auto;
}

<svg id="AElogo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.97 68.62">
  <title>ae</title>
  <path d="M96.54,52.37H94.46l0,0.15c-2.56,8.81-8.32,14.18-16.82,14.18-9.91,0-13-7.23-13.52-18.32V39.31H96.56a44.79,44.79,0,0,0-.16-6.22c-0.72-7.2-3.4-12.53-8.26-15.89-3.9-2.7-9.21-4.13-16-4.23H70.24A38.08,38.08,0,0,0,62,14.06c-3.46-8.9-11.62-12-27-12-18.81,0-28.91,5.4-28.91,17C6.11,25.9,9.43,30.6,18,30.6c4.84,0,8.87-2.1,10.85-5.59a10.73,10.73,0,0,0,1.32-5.2c0-.85-0.23-3.3-0.3-4.11,0-.49-0.08-0.9-0.1-1.18q-0.82.06-1.71,0.1c-0.84,0-1.54,0-1.83,0-2.17,0-3.52,0-4.72-.84A4.91,4.91,0,0,1,19.6,11a5.61,5.61,0,0,1,.54-3.44c1.32-2.65,5.78-4,11.15-3.51,5.54,0,7.06,4.57,7.06,22.14V36.83h-4C16.89,36.83,5.48,39.31,3,49.47A19.14,19.14,0,0,0,2.51,54a17.48,17.48,0,0,0,2.14,9c2.31,3.94,6.24,6,10.61,7a32.91,32.91,0,0,0,5.55.72c0.73,0,1.46.05,2.18,0.05h74.5V52.37H96.54Zm-58.2-.46c0,6.51-1.8,10.62-3.79,12.34l-0.23.19a3.22,3.22,0,0,1-1.93.75c-2.63,0-3.6-1.38-3.6-11.34V51.63c0-.39,0-0.76,0-1.13A17.39,17.39,0,0,1,30.43,43a6.89,6.89,0,0,1,4.76-3.69,9.53,9.53,0,0,1,1.59-.21l0.59,0h1V51.91ZM70.29,15.16h0a6.57,6.57,0,0,1,1.09.09c3.43,0.58,4.39,4.19,4.54,13.15,0,0.92,0,1.9,0,2.94V37H64.09V31.33c0-.56,0-1.09,0-1.61,0-.12,0-0.24,0-0.36C64.34,18.7,66.49,15.18,70.29,15.16Z"
  transform="translate(-2.51 -2.11)" />
</svg>
<ul id="listrunk">
  <li class="listleaf">
    <button class="btn b1"></button>
  </li>

  <li class="listleaf">
    <button class="btn b2"></button>
  </li>

  <li class="listleaf">
    <button class="btn b3"></button>
  </li>

  <li class="listleaf">
    <button class="btn b4"></button>
  </li>

  <li class="listleaf">
    <button class="btn b5"></button>
  </li>
</ul>

提前致谢。

Answer 1

我在下面向您介绍我的解决方案：

解决方案

body {
 background-color: #eeeeee;
 text-align:center;

 
}
.container {
    position: relative;
    width: 100px;
    margin: 0 auto;
}
#AElogo {
 width:100px;
 display:block;
 margin:auto;
 padding-bottom: 4px;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 2;
}
#listrunk {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1;
}
.btn {
 height: 42px;
 width: 20px;
 display: inline-block;
 border: none;
}
.b1 {
 background-color: #581845;
 box-shadow: 0 8px #4f163e;
}
.b2 {
 background-color: #900c3f;
 box-shadow: 0 8px #810b39;
}
.b3 {
 background-color: #c70039;
 box-shadow: 0 8px #b30033;
}
.b4 {
 background-color: #ff5733;
 box-shadow: 0 8px #e54e2e;
}
.b5 {
 background-color: #ffc305;
 box-shadow: 0 8px #e5af04;
}
.b1:hover {
 box-shadow: 0 4px #4f163e;
 transform: translateY(4px);
}
.b2:hover {
 box-shadow: 0 4px #810b39;
 transform: translateY(4px);
}
.b3:hover {
 box-shadow: 0 4px #b30033;
 transform: translateY(4px);
}
.b4:hover {
 box-shadow: 0 4px #e54e2e;
 transform: translateY(4px);
}
.b5:hover {
 box-shadow: 0 4px #e5af04;
 transform: translateY(4px);
}
#listrunk {
 font-size: 0px;
 padding-left: 0px;
}
.listleaf {
 display: inline-block;
} 
#parent {
 position:relative;
}
#child {
 position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

<html><head>
    <style>
        
    </style>
</head>
<body>
    

 
  <title>saxonglaser.com</title>
  
  <style type="text/css">

body {
 background-color: #eeeeee;
 text-align:center;

 
}
#AElogo {
 width:100px;
 display:block;
 margin:auto;
 padding-bottom: 4px;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.btn {
 height: 42px;
 width: 20px;
 display: inline-block;
 border: none;
}
.b1 {
 background-color: #581845;
 box-shadow: 0 8px #4f163e;
}
.b2 {
 background-color: #900c3f;
 box-shadow: 0 8px #810b39;
}
.b3 {
 background-color: #c70039;
 box-shadow: 0 8px #b30033;
}
.b4 {
 background-color: #ff5733;
 box-shadow: 0 8px #e54e2e;
}
.b5 {
 background-color: #ffc305;
 box-shadow: 0 8px #e5af04;
}
.b1:hover {
 box-shadow: 0 4px #4f163e;
 transform: translateY(4px);
}
.b2:hover {
 box-shadow: 0 4px #810b39;
 transform: translateY(4px);
}
.b3:hover {
 box-shadow: 0 4px #b30033;
 transform: translateY(4px);
}
.b4:hover {
 box-shadow: 0 4px #e54e2e;
 transform: translateY(4px);
}
.b5:hover {
 box-shadow: 0 4px #e5af04;
 transform: translateY(4px);
}
#listrunk {
 font-size: 0px;
 padding-left: 0px;
}
.listleaf {
 display: inline-block;
} 
#parent {
 position:relative;
}
#child {
 position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

  </style>
 
 <div class="container">
  <svg viewBox="0 0 94.97 68.62" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" id="AElogo"><title>ae</title><path transform="translate(-2.51 -2.11)" d="M96.54,52.37H94.46l0,0.15c-2.56,8.81-8.32,14.18-16.82,14.18-9.91,0-13-7.23-13.52-18.32V39.31H96.56a44.79,44.79,0,0,0-.16-6.22c-0.72-7.2-3.4-12.53-8.26-15.89-3.9-2.7-9.21-4.13-16-4.23H70.24A38.08,38.08,0,0,0,62,14.06c-3.46-8.9-11.62-12-27-12-18.81,0-28.91,5.4-28.91,17C6.11,25.9,9.43,30.6,18,30.6c4.84,0,8.87-2.1,10.85-5.59a10.73,10.73,0,0,0,1.32-5.2c0-.85-0.23-3.3-0.3-4.11,0-.49-0.08-0.9-0.1-1.18q-0.82.06-1.71,0.1c-0.84,0-1.54,0-1.83,0-2.17,0-3.52,0-4.72-.84A4.91,4.91,0,0,1,19.6,11a5.61,5.61,0,0,1,.54-3.44c1.32-2.65,5.78-4,11.15-3.51,5.54,0,7.06,4.57,7.06,22.14V36.83h-4C16.89,36.83,5.48,39.31,3,49.47A19.14,19.14,0,0,0,2.51,54a17.48,17.48,0,0,0,2.14,9c2.31,3.94,6.24,6,10.61,7a32.91,32.91,0,0,0,5.55.72c0.73,0,1.46.05,2.18,0.05h74.5V52.37H96.54Zm-58.2-.46c0,6.51-1.8,10.62-3.79,12.34l-0.23.19a3.22,3.22,0,0,1-1.93.75c-2.63,0-3.6-1.38-3.6-11.34V51.63c0-.39,0-0.76,0-1.13A17.39,17.39,0,0,1,30.43,43a6.89,6.89,0,0,1,4.76-3.69,9.53,9.53,0,0,1,1.59-.21l0.59,0h1V51.91ZM70.29,15.16h0a6.57,6.57,0,0,1,1.09.09c3.43,0.58,4.39,4.19,4.54,13.15,0,0.92,0,1.9,0,2.94V37H64.09V31.33c0-.56,0-1.09,0-1.61,0-.12,0-0.24,0-0.36C64.34,18.7,66.49,15.18,70.29,15.16Z"/></svg>
  <ul id="listrunk">
   <li class="listleaf">
    <button class="btn b1"></button>
   </li>

   <li class="listleaf">
    <button class="btn b2"></button>
   </li>

   <li class="listleaf">
    <button class="btn b3"></button>
   </li>

   <li class="listleaf">
    <button class="btn b4"></button>
   </li>
   
   <li class="listleaf">
    <button class="btn b5"></button>
   </li>
  </ul>
</div> 


    <script type="text/javascript">
        
    </script>

</body></html>

说明

我创建了一个水平居中的 div (margin: 0 auto) 并且具有所需的 svg 宽度。然后我将 position 设置为 relative ，当你在 children （容器中的元素）上使用 position: absolute 时，里面的元素与之相关。 z-index 可让您设置元素的 order/layer（首先呈现较低的值 - 较高的值将在顶部）。

我希望这就是您的想法。如果没有留下评论。

此致。

Answer 2

最简单的解决方案是将两个元素合二为一 div，然后将 div.

居中

    body {
      background-color: #eeeeee;
      text-align: center;
    }

    .center {
       position:absolute;
      left:50%;
      top:50%;
      transform:translateY(-50%) translateX(-50%);
      }
    #AElogo {
      width: 100px;
      display: block;
      margin: auto;
      padding-bottom: 4px;
    }
    .btn {
      height: 42px;
      width: 20px;
      display: inline-block;
      border: none;
    }
    .b1 {
      background-color: #581845;
      box-shadow: 0 8px #4f163e;
    }
    .b2 {
      background-color: #900c3f;
      box-shadow: 0 8px #810b39;
    }
    .b3 {
      background-color: #c70039;
      box-shadow: 0 8px #b30033;
    }
    .b4 {
      background-color: #ff5733;
      box-shadow: 0 8px #e54e2e;
    }
    .b5 {
      background-color: #ffc305;
      box-shadow: 0 8px #e5af04;
    }
    .b1:hover {
      box-shadow: 0 4px #4f163e;
      transform: translateY(4px);
    }
    .b2:hover {
      box-shadow: 0 4px #810b39;
      transform: translateY(4px);
    }
    .b3:hover {
      box-shadow: 0 4px #b30033;
      transform: translateY(4px);
    }
    .b4:hover {
      box-shadow: 0 4px #e54e2e;
      transform: translateY(4px);
    }
    .b5:hover {
      box-shadow: 0 4px #e5af04;
      transform: translateY(4px);
    }
    #listrunk {
      font-size: 0px;
      padding-left: 0px;
    }
    .listleaf {
      display: inline-block;
    }
    #parent {
      position: relative;
    }
    #child {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      height: 30%;
      margin: auto;
    }

<div class="center">
<svg id="AElogo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.97 68.62">
      <title>ae</title>
      <path d="M96.54,52.37H94.46l0,0.15c-2.56,8.81-8.32,14.18-16.82,14.18-9.91,0-13-7.23-13.52-18.32V39.31H96.56a44.79,44.79,0,0,0-.16-6.22c-0.72-7.2-3.4-12.53-8.26-15.89-3.9-2.7-9.21-4.13-16-4.23H70.24A38.08,38.08,0,0,0,62,14.06c-3.46-8.9-11.62-12-27-12-18.81,0-28.91,5.4-28.91,17C6.11,25.9,9.43,30.6,18,30.6c4.84,0,8.87-2.1,10.85-5.59a10.73,10.73,0,0,0,1.32-5.2c0-.85-0.23-3.3-0.3-4.11,0-.49-0.08-0.9-0.1-1.18q-0.82.06-1.71,0.1c-0.84,0-1.54,0-1.83,0-2.17,0-3.52,0-4.72-.84A4.91,4.91,0,0,1,19.6,11a5.61,5.61,0,0,1,.54-3.44c1.32-2.65,5.78-4,11.15-3.51,5.54,0,7.06,4.57,7.06,22.14V36.83h-4C16.89,36.83,5.48,39.31,3,49.47A19.14,19.14,0,0,0,2.51,54a17.48,17.48,0,0,0,2.14,9c2.31,3.94,6.24,6,10.61,7a32.91,32.91,0,0,0,5.55.72c0.73,0,1.46.05,2.18,0.05h74.5V52.37H96.54Zm-58.2-.46c0,6.51-1.8,10.62-3.79,12.34l-0.23.19a3.22,3.22,0,0,1-1.93.75c-2.63,0-3.6-1.38-3.6-11.34V51.63c0-.39,0-0.76,0-1.13A17.39,17.39,0,0,1,30.43,43a6.89,6.89,0,0,1,4.76-3.69,9.53,9.53,0,0,1,1.59-.21l0.59,0h1V51.91ZM70.29,15.16h0a6.57,6.57,0,0,1,1.09.09c3.43,0.58,4.39,4.19,4.54,13.15,0,0.92,0,1.9,0,2.94V37H64.09V31.33c0-.56,0-1.09,0-1.61,0-.12,0-0.24,0-0.36C64.34,18.7,66.49,15.18,70.29,15.16Z"
      transform="translate(-2.51 -2.11)" />
    </svg>
    <ul id="listrunk">
      <li class="listleaf">
        <button class="btn b1"></button>
      </li>

      <li class="listleaf">
        <button class="btn b2"></button>
      </li>

      <li class="listleaf">
        <button class="btn b3"></button>
      </li>

      <li class="listleaf">
        <button class="btn b4"></button>
      </li>

      <li class="listleaf">
        <button class="btn b5"></button>
      </li>
    </ul>
</div>

Answer 3

看起来问题是您将 top:0 和 bottom:0 应用于绝对定位的 svg，使其拉伸页面的整个高度并将路径留在页面的中心.

只是不强制它通过删除 bottom:0 来拉伸整页并将列表向下推似乎可以解决问题。

body {
  background-color: #eeeeee;
  text-align: center;
}
#AElogo {
  width: 100px;
  display: block;
  margin: auto;
  padding-bottom: 4px;
  position: absolute;
  top: 0;
  left: 0;
  /*bottom: 0;*/
  right: 0;
}
.btn {
  height: 42px;
  width: 20px;
  display: inline-block;
  border: none;
}
.b1 {
  background-color: #581845;
  box-shadow: 0 8px #4f163e;
}
.b2 {
  background-color: #900c3f;
  box-shadow: 0 8px #810b39;
}
.b3 {
  background-color: #c70039;
  box-shadow: 0 8px #b30033;
}
.b4 {
  background-color: #ff5733;
  box-shadow: 0 8px #e54e2e;
}
.b5 {
  background-color: #ffc305;
  box-shadow: 0 8px #e5af04;
}
.b1:hover {
  box-shadow: 0 4px #4f163e;
  transform: translateY(4px);
}
.b2:hover {
  box-shadow: 0 4px #810b39;
  transform: translateY(4px);
}
.b3:hover {
  box-shadow: 0 4px #b30033;
  transform: translateY(4px);
}
.b4:hover {
  box-shadow: 0 4px #e54e2e;
  transform: translateY(4px);
}
.b5:hover {
  box-shadow: 0 4px #e5af04;
  transform: translateY(4px);
}
#listrunk {
  font-size: 0px;
  padding-left: 0px;
  margin-top: 80px;
  /*height off svg*/
}
.listleaf {
  display: inline-block;
}

<svg id="AElogo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.97 68.62">
  <title>ae</title>
  <path d="M96.54,52.37H94.46l0,0.15c-2.56,8.81-8.32,14.18-16.82,14.18-9.91,0-13-7.23-13.52-18.32V39.31H96.56a44.79,44.79,0,0,0-.16-6.22c-0.72-7.2-3.4-12.53-8.26-15.89-3.9-2.7-9.21-4.13-16-4.23H70.24A38.08,38.08,0,0,0,62,14.06c-3.46-8.9-11.62-12-27-12-18.81,0-28.91,5.4-28.91,17C6.11,25.9,9.43,30.6,18,30.6c4.84,0,8.87-2.1,10.85-5.59a10.73,10.73,0,0,0,1.32-5.2c0-.85-0.23-3.3-0.3-4.11,0-.49-0.08-0.9-0.1-1.18q-0.82.06-1.71,0.1c-0.84,0-1.54,0-1.83,0-2.17,0-3.52,0-4.72-.84A4.91,4.91,0,0,1,19.6,11a5.61,5.61,0,0,1,.54-3.44c1.32-2.65,5.78-4,11.15-3.51,5.54,0,7.06,4.57,7.06,22.14V36.83h-4C16.89,36.83,5.48,39.31,3,49.47A19.14,19.14,0,0,0,2.51,54a17.48,17.48,0,0,0,2.14,9c2.31,3.94,6.24,6,10.61,7a32.91,32.91,0,0,0,5.55.72c0.73,0,1.46.05,2.18,0.05h74.5V52.37H96.54Zm-58.2-.46c0,6.51-1.8,10.62-3.79,12.34l-0.23.19a3.22,3.22,0,0,1-1.93.75c-2.63,0-3.6-1.38-3.6-11.34V51.63c0-.39,0-0.76,0-1.13A17.39,17.39,0,0,1,30.43,43a6.89,6.89,0,0,1,4.76-3.69,9.53,9.53,0,0,1,1.59-.21l0.59,0h1V51.91ZM70.29,15.16h0a6.57,6.57,0,0,1,1.09.09c3.43,0.58,4.39,4.19,4.54,13.15,0,0.92,0,1.9,0,2.94V37H64.09V31.33c0-.56,0-1.09,0-1.61,0-.12,0-0.24,0-0.36C64.34,18.7,66.49,15.18,70.29,15.16Z"
  transform="translate(-2.51 -2.11)" />
</svg>
<ul id="listrunk">
  <li class="listleaf">
    <button class="btn b1"></button>
  </li>

  <li class="listleaf">
    <button class="btn b2"></button>
  </li>

  <li class="listleaf">
    <button class="btn b3"></button>
  </li>

  <li class="listleaf">
    <button class="btn b4"></button>
  </li>

  <li class="listleaf">
    <button class="btn b5"></button>
  </li>
</ul>

垂直对齐问题

Vertical-Align Trouble

css

centering