Positioning issue with SVG element because of excess height space-CodePudding

I am trying to position the SVG elements in the middle of the buttons elements and make sure that the SVGs are taking up 100% of the width of the button. Everything I have tried either makes the SVG centered, but super small (Which I do not want), or positioned incorrectly. I want the actual icons to span the width of the button elements.

I should add that when inspecting element I am noticing that the svg elements have some weird access white space on the height so for reason whereas the path elements dont. I have no idea what this is for, but think it might be why it is so hard to style it.

.container {
  width: 3rem;
  border: 0.1rem solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.25rem;
}
.container > button {
  /*display: flex;
  align-items: center;
  justify-content: center;*/
  width: 1rem;
  height: 1rem;
  background-color: #eee;
  border: none;
  cursor: pointer;
}
.container > button > svg {
  width: 1rem;
}

<div class='container'>
  <button type='button'>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>
  </button>
  <button type='button'>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>
  </button>
</div>

CodePudding user response：

Give the <svg> a width and height of 100% and add an attribute preserveAspectRatio="xMidYMid slice".

Since you were complaining the result was so small, I recommend setting box-sizing: content-box; so the (currently default) padding is added to the 1rem width.

.container {
  width: 3rem;
  border: 0.1rem solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.25rem;
}
.container > button {
  /*display: flex;
  align-items: center;
  justify-content: center;*/
  width: 1rem;
  height: 1rem;
  box-sizing: content-box;
  background-color: #eee;
  border: none;
  cursor: pointer;
}
.container > button > svg {
  width: 100%;
  height: 100%;
}

<div class='container'>
  <button type='button'>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" preserveAspectRatio="xMidYMid slice"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>
  </button>
  <button type='button'>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" preserveAspectRatio="xMidYMid slice"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>
  </button>
</div>

CodePudding user response：

Because you are using svg from external library, fontawesome in this case, I suggest not to play with the viewbox. Better is to size the element around, svg will take it's place and size, path is relative to it's viewbox.

User agent will give by default some margin and padding, so for container button add margin 0 and padding 0, plus text-align center.

For button svg put it as inline-block so the sizing will effect. width and height you want, in this case, 1rem. And repeat margin 0 and padding 0 to avoid user agent effect.

.container {
  width: 3rem;
  border: 0.1rem solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.25rem;
}

.container>button {
  /*display: flex;
        align-items: center;
        justify-content: center;*/
  width: 1rem;
  height: 1rem;
  background-color: #eee;
  border: none;
  cursor: pointer;
  text-align: center;
  margin: 0;
  padding: 0;
}

.container>button>svg {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
}

<div class='container'>
  <button type='button'>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path
                d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>
    </button>
  <button type='button'>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>
    </button>

</div>