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

"Is it possible to include a button for horizontal scrolling in the table

I have a bootstrap table with overflowing set to auto within its container, along with a locked first column. While a horizontal scroll bar allows for viewing additional data, I am looking to incorporate buttons for navigation as well. Users should have th ...

javascripthtmlcssbootstrap-4

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

Height transition animation in Angular 2 - maintaining state consistency

I am currently working with an animation code that is linked to my component. animations:[ trigger('slide', [ state('show', style({ height: '*' })), state('hide ...

cssangularanimation

The modal dialog feature in HTML5 and CSS3 seems to be experiencing some issues when used in Opera browser

This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...

htmlcss

PHP implementation for a static header layout

I am interested in learning how to update content without refreshing the header. I have created a simple example below. Header.php <html> <head> </head> <body> <ul> <li><a href="index.php" ...

javascriptphpjqueryhtml

Setting constraints for table size with min-width and max-height

I have a coding dilemma involving the min-width and max-height properties in my table. The issue arises when I try to set these properties on the td element – they are being ignored by the browser. If I nest a div with the properties inside a td, the con ...

htmlcsshtml-table

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

Combining a Vuetify 2 toolbar and a navigation drawer, topped with an additional toolbar for added functionality

I am working towards achieving a layout similar to this: https://i.stack.imgur.com/M0rGl.jpg However, I currently have this setup: https://i.stack.imgur.com/VOGxJ.jpg The issue I am facing is that I am unable to position the first toolbar above the navi ...

htmlvue.jsvuetify.js

Retrieve the text input from the text field and display it as

Is there a way to display what users enter in a textfield when their accounts are not "Activated"? Here's an example: if(active == NULL);{ //I've attempted the following methods. //In this scenario, 'username' is the name of ...

javascriptphphtml

What could be causing a hydration error when utilizing a table in Next.js?

When attempting to use the tr tag in my code, I encountered an error message that reads: Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server. import React from 'react' import {useS ...

htmlreactjsnext.jshtml-table

Ways to verify the presence of a Div element within an iframe

Hello everyone. I am looking to determine if the element DIV test is present within an iframe, and if it is, I want to display an alert. <html> <body> <div id="test">test</div> </body> </html> I have loaded thi ...

htmliframe

Achieving proper HTML element order?

Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...

javascriptjqueryhtmlcss

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

javascriptjqueryhtmlcss

Issues with the creation of an AngularJS table are causing functionality to malfunction

2021 UPDATE: Note: This question was drafted when I was still learning HTML and JS. If you are seeking assistance for an issue, this might not be very useful as my code was messy. Sorry for any inconvenience caused. The question will remain posted in acco ...

javascripthtmlangularjsdatatables

Is the 3D cube spinning with a slight perspective glitch?

I've successfully created a spinning cube using html and css. However, I'm facing an issue where pressing the up and down arrow keys causes the cube to rotate in a larger space rather than around its center. I've attempted using margin: 0 a ...

htmlcss3d

Steps for identifying the file format of a document with JavaScript

Can someone assist me in determining a file type using JavaScript within the context of this HTML code? <div class="indi-download"> <div class="pull-left"> <h6 class="file-format">%file_display_name%</h6> </div> <div c ...

javascripthtml

The elusive three.module.js file has gone missing, leaving behind a trail of 404 errors

It seems like a simple mistake, but I'm encountering a 404 error for a file that actually exists: http://localhost:8000/Desktop/Skeletor/js/build/three.module.js net::ERR_ABORTED 404 (File not found) The correct path should be http://localhost: ...

javascripthtmlthree.js

Find elements that are not contained within an element with a specific class

Imagine having this HTML snippet: <div class="test"> <div class="class1"> <input type="text" data-required="true"/> </div> <input type="text" data-required="true"/> </div> I'm looking to select ...

javascriptjqueryhtml

Error encountered: Unexpected character 'C' found at the beginning of the JSON data received during the Ajax callback

When checking the network debugger in the PHP file, it displays {message: "Success", data: {Name: "admin"}}. However, there seems to be an issue with the AJAX callback. Can someone help me troubleshoot this problem that has been bothering me for a while? T ...

phphtmljsonajax

Performing a jQuery post request using AJAX and setting the content type

Greetings, here is the code snippet: <script type="text/javascript"> 14 $(document).ready(function() { 15 $('#find').click(function(){ 16 17 var amount = $(' ...

phpjqueryhtmlajaxpost