时间戳

首页 > 解决方案 > 在同一个按钮中将按钮文本与 svg 对齐

html - 在同一个按钮中将按钮文本与 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>

标签： htmlcsssvg

解决方案

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

推荐阅读