时间戳

首页 > 解决方案 > 如何垂直居中一系列 svg 圆圈？

javascript - 如何垂直居中一系列 svg 圆圈？

问题描述

我有一系列 SVG 创建的圆圈，旁边有文本，每个圆圈都有特定的边距，以创建类似“C”的形状。我很难将它们垂直居中。

我最初的尝试是创建一个容器，其中包含<ul>一系列<li>. 我的想法是，<ul>它将包含它自己的形状，因此具有完整高度的容器将使列表居中，创建我想要的，不幸的是，它没有按预期工作。

我的第二个想法是使用 bootstrap4 行列网格系统，但是当我将高度设置为满时，列完全满了，它不起作用。

这是我的列表尝试的代码，

<div class="nav_bar_container align-middle">
<ul id="nav_bar">
    <li style="margin-left: 50px;" class="nav_child">
        <svg height="100" width="100">
            <circle id="About" cx="50" cy="50" r="30" stroke-width="3" class="expand active"> </circle>
            <text>
                <b> About </b>
            </text>
        </svg>
    </li>
    <li style="margin-left: 15px;" class="nav_child">
        <svg height="100" width="100">
            <circle id="Experience" cx="50" cy="50" r="30" stroke-width="3" class="expand disabled"> </circle>
        </svg>
        <span>
            <b> Experience </b>
        </span>
    </li>

</ul>
<div>

谁能教我垂直居中元素以产生所需效果的正确方法？

我需要五个 svg 圆圈来创建一个类似 C 的形状，垂直居中在我的网页左侧。然而这个问题主要要求垂直居中。我的屏幕顶部有一个图像，使用起来很令人沮丧，因此我总是需要这个 css 来帮助，

.nav_bar_container {
    background: transparent;
    position: fixed;
    top: 0;
    height: 100vh

}

标签： javascripthtmlcss

解决方案

flexbox 您可以使用这里是更新的小提琴来实现这一点：

另外，如果您想从左侧对齐，请删除内联margin-left集li 

.nav_bar_container {
  background: transparent;
  position: fixed;
  top: 0;
  height: 100vh;
display: flex;
align-items: center;
}

.nav_child{
  display: flex;
  align-items: center;
}
<div class="nav_bar_container align-center">
  <ul id="nav_bar">
    <li  class="nav_child">
      <svg height="100" width="100">
            <circle id="About" cx="50" cy="50" r="30" stroke-width="3" class="expand active"> </circle>
            <text>
                <b> About </b>
            </text>
        </svg>
    </li>
    <li  class="nav_child">
      <svg height="100" width="100">
            <circle id="Experience" cx="50" cy="50" r="30" stroke-width="3" class="expand disabled"> </circle>
        </svg>
      <span>
            <b> Experience </b>
        </span>
    </li>

  </ul>
  <div>

推荐阅读