在同一按钮中将按钮文本与 svg 对齐

Question

我试图让菜单图标与菜单文本保持左对齐，但我不确定如何用我当前的 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>

Answer 1

您可以使用 flexbox 从左到右对齐 svg 和 text 使用以下 CSS

#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>

Answer 2

稍微更改了 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>

在同一按钮中将按钮文本与 svg 对齐

Align button text right off svg in same button

html

css

svg