對齊 SVG 和 Text 在一列 CSS

Question

我目前正在創建一個網站，但我在移動布局方面遇到了問題。 我的移動導航欄位於屏幕底部，文本應直接位於顯示的 SVG 下方。

這是它目前的樣子。 我嘗試同時使用 flexbox 和網格，但可以讓它工作。 margin-left 也是一個選項，但是左邊的按鈕離邊框太遠了，然后是最右邊的按鈕。

目前我的代碼如下所示：

CSS：

@media only screen and (max-width: 981px){
    .navbar{
        bottom: 0;
        width: 100vw;
        height: 5.5rem;
        padding-top: -0.1rem;
    }

    .logo{
        display: none;
    }

    .navbar-nav{
        flex-direction: row;
    }

    .nav-link {
        justify-content: center;
        height: 100%;
        color: var(--accent-color);
    }

    main{
        margin: 0;
        margin-bottom: 4rem;
    }

    .nav-link svg {
        width: 2.3rem;
        min-width: 2rem;
        margin: 0 1.5rem;
        margin-top: -1rem;
    }
    .nav-item .link-text {
        display: flex;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
    }
    
}

HTML/JS：

function Navbar() {
  return (
    <header>
        <nav className="navbar">
      <ul className="navbar-nav">
        <li className="logo">
          <a href="/" className="nav-link">
            <svg id="svg" xmlns="http://www.w3.org/2000/svg"
              viewBox="0, 0, 400,368.05555555555554">
             
            </svg>
            <span className="link-text">CCR</span>
          </a>
        </li>
        <li className="nav-item">
          <a href="/" className="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" className="svg" viewBox="0 0 576 512"></svg>
            <span className="link-text home">Start</span>
          </a>
        </li>
        <li className="nav-item">
          <a href="/training" className="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" className="svg" viewBox="0 0 576 512"></svg>
            <span className="link-text training">Training</span>
          </a>
        </li>
        <li className="nav-item">
          <a href="/about" className="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" className="svg" viewBox="0 0 640 512"></svg>
            <span className="link-text about">Über uns</span>
          </a>
        </li>
        <li className="nav-item">
          <a href="/gallary" className="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" className="svg" viewBox="0 0 512 512"></svg>
            <span className="link-text gallary">Bildgalerie</span>
          </a>
        </li>
        <li className="nav-item">
          <a href="/contact" className="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" className="svg" viewBox="0 0 512 512</svg>
            <span className="link-text contact">Kontakt</span>
          </a>
        </li>
      </ul>
    </nav>
    </header>
  )
}

注意：我編輯了所有 SVG 文件以縮短代碼

Answer 1

我相信問題出在您對flex-box的使用上。 當你 go 使用display: flex; 受影響的元素只是直接子元素，而不是子元素的子元素。 在這種情況下，你把flex-direction: columns; 一個nav-item ，但唯一會 go 到列的是元素a(nav-link) ，並且由於它是唯一的子元素，因此差異將為零。

所以，而不是

.nav-item {
    display: flex;
    flex-direction: column;
}

嘗試這個

.nav-link {
    display: flex;
    flex-direction: column;
}