HTML - 中心列表和图标到底部

标签 html css flexbox alignment css-grid

我开始使用 css grid 和 flex box，但我在尝试将此列表居中对齐时遇到了问题。

这是 codepen和片段:

* {
  box-sizing: border-box;
}
.container-shell {
  background: gray;
      display: -ms-grid;
    display: grid;
    grid-template-areas: "nav content content";
    -ms-grid-columns: 60px 1fr;
    grid-template-columns: 60px 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    height: 100vh;
}

nav {
  -ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: nav;
background-color: #fff;
}

main {
 -ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-area: content;
}

.navigation-container {
      display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.navigation-flex-item {
      flex: 1 0 50%;
    text-align: center;
    padding: 10px;
    min-width: 0;
}

ul {
  list-style: none;
  margin: 0;
}

.--no-padding {
  padding: 0 !important;
}

.--bottom {
  align-self: flex-end;
}

.navbar-toggle {
  margin: 14px 5px 14px 0 !important;
border: 0 !important;
transition: all .1s linear !important;
cursor: pointer;
}

.navbar-toggle {
  position: relative;
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 33px;
margin-bottom: 33px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

.sr-only {
  border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.sr-only {
  position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rec(0, 0, 0, 0);
border: 0;
}

.icon-bar {
      display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
  background-color: #888;
}

.icon-bar {
  width: 30px;
height: 3px;
background-color: #000;
border-radius: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: all .1s linear;
-webkit-transform: rotate(0);
transform: rotate(0);
}

.icon-bar:nth-child(2) {
  width: 19px;
margin-left: 11px;
}

.icon-bar + .icon-bar {
  margin-top: 4px;
}

.icon-bar:last-of-type {
  width: 19px;
  margin-right: 11px;
}
<div class="container-shell">
  <nav>
    <div style="height: 100%">
      <div class="navigation-container">
        <ul class="navigation-flex-item">
          <li>1</li>
          <li>2</li>
          <li><svg _ngcontent-c2="" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" id="Capa_1" style="enable-background:new 0 0 60 60;" version="1.1" viewBox="0 0 60 60" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
        <g _ngcontent-c2="">
          <path _ngcontent-c2="" d="M57,4h-7V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H19V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H3
         C2.447,4,2,4.447,2,5v11v43c0,0.553,0.447,1,1,1h54c0.553,0,1-0.447,1-1V16V5C58,4.447,57.553,4,57,4z M43,2h5v3v3h-5V5V2z M12,2h5
         v3v3h-5V5V2z M4,6h6v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h6v9H4V6z
          M4,58V17h52v41H4z"></path>
          <path _ngcontent-c2="" d="M38,23h-7h-2h-7h-2h-9v9v2v7v2v9h9h2h7h2h7h2h9v-9v-2v-7v-2v-9h-9H38z M31,25h7v7h-7V25z M38,41h-7v-7h7V41z M22,34h7v7h-7
         V34z M22,25h7v7h-7V25z M13,25h7v7h-7V25z M13,34h7v7h-7V34z M20,50h-7v-7h7V50z M29,50h-7v-7h7V50z M38,50h-7v-7h7V50z M47,50h-7
         v-7h7V50z M47,41h-7v-7h7V41z M47,25v7h-7v-7H47z"></path>
        </g><g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
            </svg>
          </li>
        </ul>
        <div class="navigation-flex-item --bottom --no-padding"> 
          <button class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <main>
    Hello World Content!
  </main>
</div>

如您所见，汉堡包图标与中心对齐，这很好，但文本(列表)与左侧对齐，我如何才能在不破坏汉堡包图标的情况下使文本和图像居中。我已经尝试过对齐和对齐。

最佳答案

对您的代码进行了以下更改:

  1. 默认的 flex-direction 是 row - 您必须将它更改为 navigation-container 的 column。
  2. 从元素 navigation-flex-item 中删除 flex: 1 0 50%。
  3. 绝对将汉堡放在底部。

见下面的代码:

* {
  box-sizing: border-box;
}

body {
  background: blue; /* for illustration */
}

.container-shell {
  background: gray;
  display: -ms-grid;
  display: grid;
  grid-template-areas: "nav content content";
  -ms-grid-columns: 60px 1fr;
  grid-template-columns: 60px 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  height: 100vh;
}

nav {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: nav;
  background-color: #fff;
}

main {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-area: content;
}

.navigation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* ADDED */
  height: 100%;
}

.navigation-flex-item {
  /*flex: 1 0 50%;*/
  text-align: center;
  padding: 10px;
  min-width: 0;
}

ul {
  list-style: none;
  margin: 0;
}

.--no-padding {
  padding: 0 !important;
}

.--bottom {
  /*align-self: flex-end;*/
  position: absolute; /* ADDED */
  bottom: 0; /* ADDED */
}

.navbar-toggle {
  margin: 14px 5px 14px 0 !important;
  border: 0 !important;
  transition: all .1s linear !important;
  cursor: pointer;
}

.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 33px;
  margin-bottom: 33px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rec(0, 0, 0, 0);
  border: 0;
}

.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #888;
}

.icon-bar {
  width: 30px;
  height: 3px;
  background-color: #000;
  border-radius: 0;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  transition: all .1s linear;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.icon-bar:nth-child(2) {
  width: 19px;
  margin-left: 11px;
}

.icon-bar+.icon-bar {
  margin-top: 4px;
}

.icon-bar:last-of-type {
  width: 19px;
  margin-right: 11px;
}
<div class="container-shell">
  <nav>
    <div style="height: 100%">
      <div class="navigation-container">
        <ul class="navigation-flex-item">
          <li>1</li>
          <li>2</li>
          <li><svg _ngcontent-c2="" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" id="Capa_1" style="enable-background:new 0 0 60 60;" version="1.1" viewBox="0 0 60 60" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
        <g _ngcontent-c2="">
          <path _ngcontent-c2="" d="M57,4h-7V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H19V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H3
         C2.447,4,2,4.447,2,5v11v43c0,0.553,0.447,1,1,1h54c0.553,0,1-0.447,1-1V16V5C58,4.447,57.553,4,57,4z M43,2h5v3v3h-5V5V2z M12,2h5
         v3v3h-5V5V2z M4,6h6v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h6v9H4V6z
          M4,58V17h52v41H4z"></path>
          <path _ngcontent-c2="" d="M38,23h-7h-2h-7h-2h-9v9v2v7v2v9h9h2h7h2h7h2h9v-9v-2v-7v-2v-9h-9H38z M31,25h7v7h-7V25z M38,41h-7v-7h7V41z M22,34h7v7h-7
         V34z M22,25h7v7h-7V25z M13,25h7v7h-7V25z M13,34h7v7h-7V34z M20,50h-7v-7h7V50z M29,50h-7v-7h7V50z M38,50h-7v-7h7V50z M47,50h-7
         v-7h7V50z M47,41h-7v-7h7V41z M47,25v7h-7v-7H47z"></path>
        </g><g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
        <g _ngcontent-c2="">
        </g>
            </svg>
          </li>
        </ul>
        <div class="navigation-flex-item --bottom --no-padding">
          <button class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
        </div>
      </div>
    </div>
  </nav>
  <main>
    Hello World Content!
  </main>
</div>

关于HTML - 中心列表和图标到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52306250/

上一篇：html - 父 div 使用剪辑路径剪切子 div

下一篇：css 过滤器获取图像 "bluescale"？

相关文章：

javascript - jQuery 找不到下一个元素

javascript - 如何只影响 for 循环列表中的一项？

javascript - 将文件对象从内容脚本传递到 background.js 或传递 createObjectURL(并在刷新后保持事件状态)

javascript - 尝试在线加载 CSS 和 JS，如果失败则在本地加载

jquery - 推特风格更新

html - css - 使用 grid-auto-column 创建动态宽度

javascript - 使用 jquery.load 并尝试避免两次包含相同的代码

html - 如何确保高度: 0; includes padding as well?

html - 如何在不使用绝对定位的情况下*覆盖*在 flexbox 内居中的同级 div？

css - 如何将一系列 SPAN 标签制作成均匀使用 100% 宽度的 flex-box？

©2024 IT工具网  联系我们