IE9 causing trouble with CSS vertical alignment

I'm trying to center a button with text using Cuffon for the font, but I can't get it to align vertically and horizontally. The text-align property is working fine, but vertical align isn't.

Here's the code for my div block:

btndownload
{
    background-color: #512c1d;
    background: url('../Images/Btn_Brwn.png');
    background-size: 103px 32px;
    color: #B6BD00;
    width: 103px;
    font-family: 'Century Gothic';
    font-size: 13px;
    font-weight: bolder;
    border: 0 solid #512c1d;
    margin-top: 6px;
    height: 32px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-shadow: none;
    padding-top:10px;
    margin-right: -16px;
    line-height:25px;
}

<div id="btnDownload" title="Download Image" class="btndownload">
    <cufon class="cufon cufon-canvas" alt="DOWNLOAD" style="width: 72px; height: 13px;">
    <canvas width="77" height="13" style="width: 77px; height: 13px; top: 1px; left: -1px;"> 
    </canvas><cufontext>DOWNLOAD</cufontext></cufon>

The "Download" button text is vertically centered in Chrome, IE10 and above, and Firefox, but not in IE9.

Possible mistakes could be font-size :13 px, conflicting with line-height:25px. Also, there's padding-top:10px, which should also contribute to the vertical alignment issue.

htmlcss

Answer №1

It seems like this solution should do the trick

#btnDownload {
        position: absolute;
        width: 300px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-left: -150px; /* Negative half of width. */
        margin-top: -100px; /* Negative half of height. */
}

Make sure to include this code along with your other CSS styles.

*Although not tested in Internet Explorer, it has been proven to work correctly in Chrome and Firefox.

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 refreshing the default style of Material UI select

I'm having trouble customizing the default background color of the first menuItem in the select component. The class I need is not visible when inspecting the element, as the background color disappears upon inspection. Steps to reproduce: 1. Click ...

javascripthtmlcssreactjsmaterial-ui

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

Disregarding 'zIndex' directive within JavaScript function, an image stands apart

There is an issue with the z-index values of rows of images on my webpage. Normally, the z-index values increase as you scroll further down the page. However, I want certain items to have a lower z-index than the rest (except on hover). These items are i ...

javascriptcss

Unable to show an image within the <div> element when hovering the mouse

Is it necessary to use the background style image in order to display an image on mouseover of a name? I have implemented a controller and would like the image to be replaced by text within a div tag. Below is my HTML code: <!DOCTYPE html> <html& ...

javascriptangularjshtml

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

c#css.netwinforms

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

What is the best way to deactivate select option(s) based on the JSON data retrieved through AJAX?

I am facing an issue with a dropdown menu that contains several options. My goal is to loop through these options and set the disabled attribute on specific ones based on the result of an Ajax call. This is what I am trying to accomplish. Example of Repo ...

javascriptjqueryhtmlajaxjson

"Discover the steps to seamlessly integrating Snappuzzle with jQuery on your

I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...

javascriptjqueryhtml

I'm having trouble with my dropdown menu functionality

My dropdown menu was functioning properly until yesterday, and now I am unable to determine what went wrong even after double-checking the code. #apDiv2 { position: fixed; width: 100%; height: auto; float: none; z-index: 6; list-style-type: ...

htmlcss

See-through navigation bar custom-made for materializecss

I've been trying to make my navbar transparent using materializecss, but all my attempts so far have resulted in it turning white. Any suggestions would be greatly appreciated. Thank you! Here is the code I tried: <nav> <div class="nav-w ...

htmlcssmaterialize

Shifting a division using insertAfter

Hey there! I'm having a bit of trouble using the insertAfter function. In each product in my store, I need to position an "add to cart" button after the price. This is the code I tried: <Script type="text/javascript" > jQuery(document).read ...

javascriptjqueryhtmlcss

Having difficulty selecting an element using XPath based on its title

https://i.stack.imgur.com/Of29v.png My XPath: ((//span[text()='Number of Allowances'])/../../../following::div//table[@class='mainTable']//tr[1]//input[@data-automation-id="numericInput"]) The XPath above clearly specifies that the ai ...

javahtmlxpathselenium-webdriver

Tips for splitting a container of specific height into sections measuring 80% and 20%

I am working on a container with a fixed position that I want to split into two halves: 80% and 20% at the bottom. This is what I want it to look like: Click here to see the image. Note: The layout should adjust itself when the window is resized. You c ...

javascripthtmlcss

Updating radio button color upon selection in Boostrap

Looking to customize the colors of radio buttons found on this Bootstrap page By default, the background color is white and changes to blue when clicked. <div class="btn-group" role="group" aria-label="Basic radio toggle button ...

htmlcsstwitter-bootstrapbootstrap-5

Shifting HTML table in Javascript by toggling checkboxes

When I click the checkbox, the table elements are not displaying inline. I am simply hiding the class "box". Do I need to write a special format? By default, the elements are displayed inline but when I check the checkbox, they shift. The column 'Stat ...

javascripthtmljquerycss

Is there a way to access an HTML element using Vue's methods?

Here is an example of my Vue component structure: <template> ... </template> <script> export default { methods: { buildDescription () { if (!this.description) { const div = document.createEl ...

javascripthtmlvue.jsvuejs2vue-component

What is the best way to incorporate width adjustments in an image source for a responsive website?

Currently learning CSS and experimenting with it on an HTML page. For reference, I'm using this link. Encountering an issue with a responsive header image that adjusts size based on device (small on mobile, large on desktop). Is it possible to achiev ...

jqueryhtmlcss

Tips for concealing boostrap spinners

Within the main component, I have an @Input() alkatreszList$!: Observable<any[]>; that gets passed into the child component input as @Input() item: any; using the item object: <div class="container-fluid"> <div class="row ...

cssangulartypescriptbootstrap-5

The CSS code seems to be ineffective when attempting to center elements with a specific width in react.js

Hey everyone, I'm currently working on developing a web application using react-bootstrap and I've encountered an issue with adjusting the width of my row and centering it. I have already created the necessary CSS and JS files, but I am unable to ...

cssreactjsreact-bootstrap

Adjusting the size of the snap increments

When using gridstack, I have the ability to resize my widgets. However, I've noticed that when dragging on the widgets' handles, they snap to specific sizes, which seems to be a fixed amount. If I wanted to set the widget's size to something ...

javascriptcssgridstack