Aligning an SVG icon at the center of a button

I have elements that are currently being used as buttons, but I want to switch them out for actual button tags. This would improve accessibility and allow keyboard navigation using the tab key to focus on my buttons. Each button contains a centered SVG image. However, when I replaced the div tags with button tags, the images ended up off-center. (They also turned gray, but I easily fixed that by setting the background color to transparent.)

Can anyone explain why these two buttons are centering differently? How can I ensure that the one on the left is centered properly in both horizontal and vertical directions while maintaining its status as a proper button element?

Thank you.

.control-panel {
  border: 1px solid #0000;
  display: flex;
  justify-content: space-between;
}

.button {
  border: 1px solid #000;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: transparent;
  align-items: center;
  cursor: pointer;
}

svg {
  background-color: #0f84;
}
<div class="control-panel" style="width: 100px;">
  <button class="button" style="height: 39px; width: 39px;"> <!-- BUTTON, BUT NOT CENTERED -->
                <svg style="height: 37px; width: 37px;" viewBox="-18.5 -18.5 37 37" xmlns="http://www.w3.org/2000/svg"><path d="M12,-12 L12,12 L-12,12 L-12,-12 Z" stroke="#000" fill="none" stroke-width="1.5"></path></svg>
            </button>
  <div class="button" style="height: 39px; width: 39px;">
    <!-- DIV, BUT CENTERS CORRECTLY -->
    <svg style="height: 37px; width: 37px;" viewBox="-18.5 -18.5 37 37" xmlns="http://www.w3.org/2000/svg"><path d="M12,-12 L12,12 L-12,12 L-12,-12 Z" stroke="#000" fill="none" stroke-width="1.5"></path></svg>
  </div>
</div>

htmlcsssvgbutton

Answer №1

Forget about it. I managed to resolve the issue by adjusting the padding to 0px. (Keeping this here just in case someone else runs into the same problem.)

.control-panel {
  border: 1px solid #0000;
  display: flex;
  justify-content: space-between;
}

.button {
  padding:0;
  border: 1px solid #000;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: transparent;
  align-items: center;
  cursor: pointer;
}

svg {
  background-color: #0f84;
}
<div class="control-panel" style="width: 100px;">
  <button class="button" style="height: 39px; width: 39px;"> <!-- BUTTON, BUT NOT CENTERED -->
    <svg style="height: 37px; width: 37px;" viewBox="-18.5 -18.5 37 37" xmlns="http://www.w3.org/2000/svg">
      <path d="M12,-12 L12,12 L-12,12 L-12,-12 Z" stroke="#000" fill="none" stroke-width="1.5"/>
    </svg>
  </button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for evenly spacing items in a navigation bar

I'm having trouble centering the logo on the navbar as it always leans more towards the left. Is there a way to resolve this problem using Bootstrap classes? The navbar consists of a dropdown toggle button on the left, the logo in the center, and two ...

htmlcssbootstrap-4

"My JavaScript code for toggling visibility is not functioning properly. Any suggestions on how to fix

I am currently working on a task that involves showing and hiding container1, but I am confused as to why my code is not functioning properly. The task requirements are as follows: - Clicking on the "Show" button should display container1 - Clicking on the ...

javascripthtml

Ways to conceal a child div element without using any specific ID reference

I encountered an issue where I need to conceal all divs within a parent div except the first one. The challenge is that these divs do not possess any unique identifiers. Is there a way to achieve this task using CSS or pure JavaScript? <div role="list ...

javascripthtmlcss

I noticed that my jquery code is injecting extra white space into my HTML5 video

Ensuring my HTML5 background video stays centred, full-screen, and aligned properly has been made possible with this jQuery snippet. $(document).ready(function() { var $win = $(window), $video = $('#full-video'), $videoWrapper = $video. ...

javascriptjqueryhtmlhtml5-videowhitespace

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

csshtmltextcenter

Tips on increasing the height of an element that is overflowing

When populating my timeline component with dynamically mapped data from an array, I encountered an issue where if I added more data causing the maximum height to be reached, the overflow-y element didn't display all content. Despite trying various sol ...

javascripthtmlcssreactjs

Ensure the form is properly validated before initiating the submission process on 2checkout

Attempting to prevent the form from being submitted, I implemented the code below. Typically, this method works perfectly fine. However, when integrating 2checkout js (), it does not function as intended. <form onSubmit="validate(); return false;" meth ...

javascriptjqueryhtml2checkout

jQuery replacing spaces in id names

I'm encountering an issue with the following HTML and jQuery code. The problem seems to be related to the space in the ID name. HTML <span id="plus one">Plus One</span> jQuery $("#plus one").hide(); Since I'm unable to change the ...

jqueryhtml

Error message appears when attempting to display a variable in HTML without defining it

Python if($count == 1) { session_register("username"); $_SESSION['username'] = $username; header("location: ../home"); }else { $error = "Your Login Name or Password is invalid"; } CSS -- line 43 <?php echo "<p cl ...

phphtmlmysqlecho

Sets a minimum width for a Bootstrap panel

I have a panel panel-default on my page to display some data. I want the panel's min-width to be 720px, and if the window is resized to less than 720px, I want a horizontal scrollbar to appear. However, the panel cannot shrink below 720px similar to u ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

pythonhtmlcssflaskjinja2

The e.currentTarget attribute in Material UI buttons is a key element that

I am facing an issue with implementing three tabs and buttons in my project. Each button should display a corresponding message when selected I have tried using e.currentTarget but no success so far. Can someone guide me on how to resolve this problem? You ...

javascripthtmlreactjsreduxmaterial-ui

Is there a way for me to retrieve the price using the xpath?

I have this code snippet currently: CurrentPrice=driver.find_element_by_xpath('/html/body/div[2]/div[4]/div[2]/header/div/div[3]/div[1]/div/div/div/div[1]/div[1]').get_attribute("title") This is the price data I am attempting to extrac ...

pythonhtmlweb-scraping

Determine the size of an SVG while taking into consideration any strokes applied

Is there a way to seamlessly position an SVG in the corner of a div, despite having a dynamically generated stroke? Calculating the distance to the outermost part of the border proves difficult when dealing with irregular shapes like stars. Here's my ...

javascriptjquerysvg

The video is not appearing on mobile devices using Safari, Firefox, and Chrome, but it is displaying properly on desktop computers

My website has a video in the header that works fine on desktop but not on mobile. I am using next.js 13.4 and here is my code: <video id="background-video" autoPlay playsInline loop muted classN ...

javascripthtmlreactjsnext.jsfrontend

Tips for showcasing an image partially with primefaces/jsf

Looking to display just a single icon from a sprite image? Here is how you can do it using jsf/primefaces: If you tried the code below but ended up displaying the complete image, try adjusting the background-position values: <p:graphicImage value="/re ...

cssjsfprimefacescss-sprites

Display HTML in JavaScript without altering the Document Object Model

Is it possible to style a custom HTML tag called "location" without directly modifying the DOM? For instance, having <location loc-id="14" address="blah" zipcode="14" /> Would it be feasible to render it like this: <div class="location"> ...

javascriptjqueryhtmlcssdom

``Incorporating best practices: Setting the height of the parent container equal to the height of

When designing a container, is it considered beneficial to assign each child within the container its own height property, even if the parent container has already been allocated a specific height? If not, are there alternate methods available for transfer ...

cssheightparent-child

The battle between Typography and HTML formatting elements

When it comes to choosing between the <Typography/> tag and normal HTML tags like <p>, I find myself in a state of ambiguity. <Box className={someClassName}> <Typography>{someVariableName}</Typography> </Box> or <p ...

htmlcssreactjsmaterial-ui

JavaScript Processing Multiple Input Values to Produce an Output

Hello, I am working on creating a stamp script that will allow users to enter their name and address into three fields. Later, these fields will be displayed in the stamp edition. Currently, I have set up 3 input fields where users can input their data. He ...

javascriptjqueryhtmlcss