在同一個按鈕中將按鈕文本與svg對齊

我試圖讓選單圖示在選單文本的左側對齊，但我不確定如何使用我當前的 css 來做到這一點，我是否應該嘗試將其包裹在網格中并使用網格將它們在一側分開每個還是我應該嘗試使用 flex 讓它們彼此行內？

這是我的 html：

#top-button-right {
  margin-left: auto;
  display: flex;
  color: white;
}

#mobile-top-button {
  background-color: darkblue;
  font-size: 1rem;
  text-align: center;
  color: white;

}

#mobile-top-open {
  fill: white;
}

#mobile-top-close {
  display: none;
  fill: white;
}

<section id="top-button-right">
        <button id="mobile-top-button">
          <span id="mobile-top-open">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <title>Hamburger-menu-outline-24x24</title>
              <rect x="2" y="5" width="20" height="2"></rect>
              <rect x="2" y="11" width="20" height="2"></rect>
              <rect x="2" y="17" width="20" height="2"></rect>
            </svg>
          </span>
          <span id="mobile-top-close">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <title>close-outline-24x24</title>
              <polygon
                points="20.71 4.71 19.29 3.29 12 10.59 4.72 3.31 3.31 4.72 10.59 12 3.31 19.28 4.72 20.69 12 13.41 19.28 20.69 20.69 19.28 13.41 12 20.71 4.71"
              ></polygon>
            </svg>
          </span>
          Meny
        </button>
 </section>

uj5u.com熱心網友回復：

稍微更改了 html 以使其更容易一些，但是我使用 flexbox 得到了想要的結果。如果對你有幫助，請點個贊：）

#top-button-right {
    margin-left: auto;
    display: flex;
    color: white;
  }
  
  #mobile-top-button {
    background-color: darkblue;
    font-size: 1rem;
    text-align: center;
    color: white;
    display: flex;
  
  }
  
  #mobile-top-open {
    fill: white;
  }
  
  #mobile-top-close {
    display: none;
    fill: white;
  }


  #mobile-button-wrapper{
      fill: white;
      display: flex;
      width: 30px;

  }
  #mobile-button-title{
      text-align: center;
      margin: auto;
      margin-left: 5px;
  }

<section id="top-button-right">
        <button id="mobile-top-button">
            <div id="mobile-button-wrapper">
                <div id="mobile-button-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <title>Hamburger-menu-outline-24x24</title>
                        <rect x="2" y="5" width="20" height="2"></rect>
                        <rect x="2" y="11" width="20" height="2"></rect>
                        <rect x="2" y="17" width="20" height="2"></rect>
                      </svg>
                </div>
                
                <div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <title>Hamburger-menu-outline-24x24</title>
                    <rect x="2" y="5" width="20" height="2"></rect>
                    <rect x="2" y="11" width="20" height="2"></rect>
                    <rect x="2" y="17" width="20" height="2"></rect>
                    </svg>
                </div>
            </div>
          <div id="mobile-button-title">
            <span>Menu</span>
          </div>
          
        </button>
 </section>

uj5u.com熱心網友回復：

您可以使用以下 CSS對齊svg并text從左到右對齊flexbox

#mobile-top-button{
    display: flex;
    align-items: center;
    gap: .5rem;
}

#mobile-top-open svg {
    width: 2rem;
    height: 2rem;
}

#top-button-right {
  margin-left: auto;
  display: flex;
  color: white;
}

#mobile-top-button {
  background-color: darkblue;
  font-size: 1rem;
  text-align: center;
  color: white;
}

#mobile-top-open {
  fill: white;
}

#mobile-top-close {
  display: none;
  fill: white;
}

#mobile-top-button {
  display: flex;
  align-items: center;
  gap: .5rem;
}

#mobile-top-open svg {
  width: 2rem;
  height: 2rem;
}

<section id="top-button-right">
  <button id="mobile-top-button">
        <span id="mobile-top-open">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>Hamburger-menu-outline-24x24</title>
            <rect x="2" y="5" width="20" height="2"></rect>
            <rect x="2" y="11" width="20" height="2"></rect>
            <rect x="2" y="17" width="20" height="2"></rect>
          </svg>
        </span>
        <span id="mobile-top-close">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <title>close-outline-24x24</title>
            <polygon points="20.71 4.71 19.29 3.29 12 10.59 4.72 3.31 3.31 4.72 10.59 12 3.31 19.28 4.72 20.69 12 13.41 19.28 20.69 20.69 19.28 13.41 12 20.71 4.71"></polygon>
          </svg>
        </span>
        Meny
      </button>
</section>

標籤：html css svg

上一篇：Python編碼和測驗

下一篇：svg：在<use>中設定路徑樣式