0

我正在尝试使用侧边栏中的 display:flexbox 在无序列表的中心对齐图像和文本。 但是图像和文本总是显示在侧边栏的最左侧。我也尝试将弹性框分配给“li”，但这并没有改变任何东西。还有比使用 flexbox 更好的方法来实现这一点吗？

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 5% 95%;
  grid-template-rows: 5% 91% 4%;
  grid-template-areas: "sidebar header" "sidebar content" "footer footer";
}

.header {
  grid-area: header;
  background-color: #4792e6;
}

.sidebar {
  grid-area: sidebar;
  background-color: #4792e6;
}

.content {
  grid-area: content;
  background-color: #f7f7f7;
  display: grid;
  width: 100%;
  height: 100%;
}

.footer {
  grid-area: footer;
  background-color: #4792e6;
}

.img-circle {
  width: 70%;
  background: #fff;
  margin-left: 15%;
  z-index: 1000;
  position: inherit;
  margin-top: 20px;
  border: 1px solid rgba(52, 73, 94, .44);
  padding: 4px;
  border-radius: 50%;
}

.maintenance {
  background-color: black;
  display: grid;
  grid-template-rows: 15% 85%;
  grid-template-areas: "maintenance-nav" "maintenance-info"
}

.maintenance-nav {
  grid-area: maintenance-nav;
  background-color: #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.maintenance-info {
  grid-area: maintenance-info;
  background-color: blue;
}

.components {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 10% 90%;
  grid-template-areas: "components-tree components-nav" "components-tree components-data";
  width: 100%;
  height: 100%;
}

.components-tree {
  grid-area: components-tree;
  background-color: white;
}

.components-nav {
  grid-area: components-nav;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ededed;
}

.components-data {
  grid-area: components-data;
  background-color: yellow;
}

.maintenance-nav>div {
  display: inline-block;
  height: 60px;
  background-color: white;
  text-align: center;
  margin: 30px;
  border-radius: 10px;
  width: 13%;
  font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
}

.components-nav-links li {
  list-style: none;
  display: inline-block;
  padding: 0px 25px;
  margin-right: 2rem;
}

.components-nav-links li a {
  color: black;
  transition: all 0.3s ease 0s;
}

.components-nav-links li a:hover {
  padding: 13px;
  border: 2px solid #4792e6;
  border-radius: 10px;
  color: #419C99;
}

.sidebar-navbar {
  width: 100%;
  height: 100%;
}

.sidebar-navlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-navitem img {
  width: 50%;
}

.sidebar-navitem {
  width: 100%;
  height: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
  <title></title>
</head>

<body>
  <!--Layout grid -->
  <div class="grid">
    <!--header grid-->
    <div class="header">Header</div>
    <!--sidebar grid-->
    <div class="sidebar">
      <nav class="sidebar-navbar">
        <ul class="sidebar-navlist">
          <li class="sidebar-navitem">
            <a href=""><img src="{{ url_for('static', filename='images/maintenance.svg') }}"></a>
            <span>Main.</span>
          </li>
          <li class="sidebar-navitem">
            <a href=""><img src="{{ url_for('static', filename='images/maintenance.svg') }}"></a>
            <span>Purchase</span>
          </li>
        </ul>
      </nav>
    </div>

    <!--contenant grid-->
    <div class="content">
      {% block content %}{% endblock %}
    </div>
    <!--footer grid-->
    <div class="footer">Footer</div>
  </div>
</body>

</html>

4

1 回答 1

0

对于这个问题，我有一个更好的解决方案：

.sidebar-navitem {
width: 100%;
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
}

align-items:center 不起作用，因为需要在li而不是ul上设置此属性。

如果将此属性应用于ul，则居中的 li 不是li中的项目。

于 2020-06-01T08:11:41.697 回答