垂直对齐故障

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时，我将position: absolute设置为children内部元素与其相关。 z-index允许您设置元素的顺序/图层（较低的值首先渲染 - 较高的值将位于顶部）。

我希望这是你的想法。如果没有发表评论。

最好的问候。

Answer 2

最简单的解决方案是将两个元素放入一个div中，然后将div居中。

＆＃13;

＆＃13;

    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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

只需不要强制它通过删除bottom:0来拉伸整页，然后按下列表似乎可以解决问题。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;