Question 240239 in Html Question posted in
Some basic documentation can be found here.

Html – Trying to center an svg inside a button

I’m trying to center my SVG inside a button i’ve created and it automatically puts the svg like this, anyone got any ideas? Using align-items,vertical-align or justify-content isn’t working either.

output

.buttonyo {
  position: absolute;
  top: 60px;
  width: 24px;
  height: 24px;
  padding: 1em;
  border: .1875em solid;
}

.svging {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
<div>
  <button type="button" class="buttonyo">
    <div style="width: 100%; height: 100%; fill: currentcolor;">
        <svg class="svging" viewBox="0 0 24 24" width="24" height="24" >
            <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path>
        </svg>
    </div>
  </button>
</div>

svg to be centered within the button or at least housed within it. Using align-items,vertical-align or justify-content isn’t working either.

Tags:

4

Answers


  1. 0

    Try this:

    .buttonyo {
  position: relative;
  top: 60px;
  width: 24px;
  height: 24px;
  padding: 1em;
  border: .1875em solid;
}

.svging {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
    <div>
  <button type="button" class="buttonyo">
    <div style="width: 100%; height: 100%; fill: currentcolor;">
        <svg class="svging" viewBox="0 0 24 24" width="24" height="24" >
            <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path>
        </svg>
    </div>
  </button>
</div>
    Login or Signup to reply.
  2. 0

    First, you should not have a block tag (div) inside an inline tag (button).

    Secondly, you do not need to make it complicated. Only, adjust the height and width of the button as per padding and border.

    So, to have 5px padding on all side, you have to increase the width (5px left + 5px right) and height by 10px (5px top + 5px bottom).

    Lastly, you also need to consider the button’s border while setting the width of the button.

    .buttonyo {
    position: absolute;
    top: 60px;
    width: 36px;
    height: 36px;
    border: 2px solid;
    padding: 5px;
}
    <div>
  <button type="button" class="buttonyo">
    <svg class="svging" viewBox="0 0 24 24" width="24" height="24">
            <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path>
        </svg>
  </button>
</div>
    Login or Signup to reply.
  3. 0

    This code will work:

    .buttonyo {
  position: relative;
  top: 60px;
  width: 24px;
  height: 24px;
  padding: 1em;
  border: .1875em solid;
}

.svging {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
    <div>
  <button type="button" class="buttonyo">
    <div style="width: 100%; height: 100%; fill: currentcolor;">
        <svg class="svging" viewBox="0 0 24 24" width="24" height="24" >
            <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path>
        </svg>
    </div>
  </button>
</div>

    In the code, I setted the parent element’s (.buttonyo) position to relative so I can put my elements (inside of .buttonyo) everywhere I want. For the .svging, I setted the top and left properties to 50%, that way it can be centered from the top-left corner of the SVG. With transform:translate(-50%,-50%), I setted the ‘top-left corner’ thing to ‘center’ of the element so it will perfectly centered inside the button.

    Hope that will helps!

    Login or Signup to reply.
  4. 0

    Hi you’ve to add simple three lines to make it center as defined below. as 50% will be at the center of the box and transform: translate(-50%, -50%) will make it fixed at the center. So whatever would be condition it’ll be always at center of the box and overall your code will be:

    .buttonyo {
  position: relative;
  top: 60px;
  width: 24px;
  height: 24px;
  padding: 1em;
  border: .1875em solid;
}

.svging {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <div>
  <button type="button" class="buttonyo">
      <div style="width: 100%; height: 100%; fill: currentcolor;">
          <svg class="svging" viewBox="0 0 24 24" width="24" height="24" >
              <path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path>
          </svg>
      </div>
    </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search