I am facing an issue with aligning a button with an image on it properly. Here is the code I am using:
<button type="button" style="width: 23px; height: 23px; padding:0">
<img src="Icon_304.png" />
</button>
Although the button looks fine in Chrome, it appears to be misaligned in Firefox. It is not horizontally centered and seems skewed to the right. I have attached a screenshot from Firefox below. I have tried adding 'margin: 0' to the img tag, but it did not fix the issue.
To achieve the desired button dimensions, it is recommended not to explicitly set them but rather rely on padding. It is advisable to include these styles in a separate style sheet as demonstrated below.
DEMO: http://jsfiddle.net/QgTkt/4/
.tallButton {
padding: 50px 10px;
}
.wideButton {
padding: 10px 50px;
}
.equalButton {
padding: 10px;
}<button type="button" class="equalButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="wideButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="tallButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>To achieve a button with any size without changing the padding, you can use absolute positioning for the image along with negative translate. This method allows for flexibility in setting the button size.
.resizeableButton{
position:relative;
width:200px;
height:200px;
}
.resizeableButton img {
position:absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Make the button more enjoyable by setting an image as its background.
<button class="custom-button"></button>
.custom-button {
background-image: url("./icon.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Check out the demo: http://jsfiddle.net/x7j4o0uh/1/
I quickly put this together and it may still need some adjustments, but you can try it out here: http://jsfiddle.net/GGXaP/3/
This jQuery script manages user interaction by adding or removing CSS classes:
(function($) {
$(document).ready(function() {
$('.imageButton').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('.imageButton').mousedown(function() {
$(this).addClass('mouseDown');
});
$('.imageButton').mouseup(function() {
$(this).removeClass('mouseDown');
});
});
}(jQuery));
After that, it's just a matter of styling the button with CSS to your liking. The example provided is basic, as I focus more on functionality than aesthetics.
I found a solution for this problem while working on Chrome. I simply added the CSS rule align-items : center to my button element.
In Chrome, buttons are initially set with the rule align-items : flex-start, which causes elements inside the button to align to the left. By changing this property to center alignment, I was able to successfully place the image inside my button in the center.
For proper alignment of images within buttons, it is recommended to use padding on the button element rather than specifying height or width directly for the image.
<button type="button" style="padding:10px">
<img src="assets/icons/searchIcon.png">
</button>
blockquote {
display: flex;
justify-content: center;
}
Inspired by: [1]
Adjust the percentages on the right and bottom until your image is perfectly centered
Apply the CSS property position: relative; to the button element
For the button's image, use
position: absolute; right:()% bottom()%I'm in the process of creating a website with a horizontal scroll similar to k2.pl. Here's what I have accomplished so far using jQuery animate and scroll: // Obtaining the X and Y axis and moving the entire page accordingly $('.scroll&apo ...
My goal is to design something that resembles the following: The challenge lies in my preference to contain it within a single div, considering the drop-down features an inner shadow and a drop shadow. Thank you in advance, and please feel free to ask fo ...
I have two forms with different IDs (form_sign and form_login) and I am using AJAX to submit them. The form_sign is working fine, but the other form is not functioning properly. When I tried to display an alert after submitting the form_login function, it ...
I'm facing an issue with an HTML page that contains an autoplay tag for a song (the file is in mp3 format). When I open the page as a local file on my Mac, the song plays fine. However, when I try to run it using a node.js file with socket.io, the son ...
Implementing search results using ul li: <ul className="search-result"> <li tabindex="1">title here...</li> <li tabindex="2">title here...</li> <li tabindex="3">title here... ...
Is there a way to prevent page scrolling when clicking on a row field in ui-grid? I'm working with a page that has ui-grid, and each row includes an anchor tag with a URL value linked and target="_blank" to open in a new tab like the example below: ...
I am looking to create a roulette game that randomly selects numbers and displays them. Initially, I attempted to use images and backgroundOffset, but it caused significant lagging issues and difficulty in checking the rolled number. Therefore, I have impl ...
Having trouble getting this radial gradient to display correctly in Firefox: background-image: -moz-radial-gradient(bottom center, 900px 900px, #7dd134 0%, #137f1e 90%, #137f1e 100%); ...
I'm facing a challenge with maintaining the size of logo images within their "circle containers" regardless of the browser width. The containers are set at 100px by 100px using the following CSS: .timeline-image::before { content: ""; width: ...
As someone who is brand new to Web development, NodeJs servers, and Pug, this is my first time diving into any of these technologies. My goal is to create a dynamic box (in the form of a div) that changes its content based on a list from a JSON file. Initi ...
I have been attempting to repaint a toggle button, but no matter what I do, I cannot seem to find the correct CSS style to override. The current setup can be viewed at CSS: .webix_el_toggle button{ background-color:grey !important; border-color: ...
My website has a simple jQuery function that expands information divs. It was working perfectly fine until the other day when I made some changes to my site (not related to the jQuery) and now it's suddenly not working at all, and I can't figure ...
I recently created an expansion panel that is working well, but I am having trouble removing a padding from the subpanel section. Despite my efforts, I haven't been able to find a suitable solution. Here's a link to the panel image: https://i.ss ...
Utilizing Bootstrap3 for my responsive page design. In the banner content, I am including a box with text inside: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <s ...
<!-- --> <%-- --%> These tags are used for commenting out code. What is the distinction if both appear in the same file? Update: Apologies, this was actually found in an aspx file. Are there any variations when used in that context? ...
For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...
Recently, I've been working on a simple front page design but encountered an issue with moving my background. Despite trying different approaches like adjusting padding, the problem persists. As a beginner in coding, this has been quite a challenge, b ...
I have an Array within Items. My goal is to display them in a Table format using PDFMake. table: { multiple pages headerRows: 2, widths: ['auto', 100, 200, 'auto', 'auto', 'auto'], body: [ ...
I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...
When it comes to altering the width (or any other properties) of an element using @media queries, there are multiple approaches available. One option is to utilize aspect pixel ratio, device width, and height. Find out more at https://developer.mozilla.or ...