The button on my page refuses to align in the center, and I'm at a loss as

Struggling to center a button within my div, despite having all other content centered.

Here is my code:


        .middle {
          width: 100%;
          height: auto;
          text-align: center;
          position: relative;
        }
        
        .middle section {
          padding: 18vh 6%;
          line-height: 0.5;
          color: #EE6352;
          font-weight: 400;
          font-size: calc(16px + 3vw);
        }

        ...
      
<a id="middle">
        <div class="middle">
...

After some research, I added the following to the .upbutton class to center it:

margin:0;
-ms-transform: translateX(-50%);
transform: translateX(-50%);

It worked for centering the button initially, but when hovered over, it lost its center alignment. Can anyone clarify why this happened and provide guidance? Much appreciated!

htmlcssbuttoncenter

Answer №1

Don't forget to include a transform: translateX(-50%); in the :hover state for the button. This will prevent it from snapping back. When you modify the transform property on hover, it replaces the existing one, causing it to return to the original translateX(0) position.

.upbutton:hover {
  background: #00ace6;
  -webkit-transform: translateX(-50%) scale(0.94);
  -ms-transform: translateX(-50%) scale(0.94);
  transform: translateX(-50%) scale(0.94);
}

Answer №2

<head>
    <style>
        .middle
        {
        width: 100%;
        height: auto;
        text-align: center;
        position: relative;
        }
        .middle section
        {
          padding: 18vh 6%;
          line-height: 0.5;
          color: #EE6352;
          font-weight: 400;
          font-size:calc(16px + 3vw);

        }
        .middle ul
        {
          text-align: left;
        }
        .middle li
        {
          font-size: calc(12px + 2vw);
          line-height: 1.25;
          color: #2A2D34;
        }
        .middle p
        {
          font-size: calc(14px + 2.4vw);
          font-weight: 400;
          color: #2A2D34;
        }
        .upbutton
        {
          padding: 10px;
          background: #1ac6ff;
          border-radius: 50%;
          border-style: none;
          cursor: pointer;
          position: absolute;
          top:50%;
          left:50%;
          transition: background 0.3s;
          box-shadow: 2px 2px 5px rgba(102, 102, 102, 0.5);
        }
        .upbutton img{width: 25px;height: 25px;}
        .upbutton:hover{ background: #00ace6;
          -webkit-transform: scale(0.94);
                -ms-transform: scale(0.94);
                transform: scale(0.94); }
        .upbutton:active{background: #0086b3;}
    </style>
    </head>
    <a id="middle"><div class="middle"></a>
          <section>
          <a href="#top"><button class="upbutton"><img src="https://png.pngtree.com/png-vector/20190419/ourmid/pngtree-vector-up-arrow-icon-png-image_956434.jpg"></button></a>
          <h1>content</h1>
          <ul>
          <li>content</li>
          <li>content</li>
          <li>content</li>
          </ul>
          <p>...and more</p>
          </section>
          </div>

In this instance, it is recommended to only utilize the properties 'position': absolute and top:50%,left:50%

Answer №4

Consider implementing this solution directly in the HTML code. EDIT: Alternatively, you can try using JavaScript.

<center><button onclick = "goToTop()" id = "buttonId"><img src="img/arrow.png"></img></button></center>
<script>
function goToTop(){
var currentLink = window.location.href;
window.location = currentLink+'#top';
}
</script>

If this doesn't work for your case, let me know and I'll attempt to troubleshoot it. Additionally, please confirm if this solution worked for you. It has been tested and proven functional on Chrome browser.

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

How can I convert an HTML table into a PDF using TCPDF while ensuring that all content is contained within a single div in PHP?

I have successfully converted my JSON API data into an HTML TABLE format and now I am trying to generate a PDF from this HTML TABLE using TCPDF in PHP. Despite trying various methods related to PDF generation using TCPDF, I am facing issues with my code wh ...

phphtmljson

Disable the button when there is no input provided

How can I disable the button when the text length is less than or equal to 0 in Vue.js and set its properties within the tag? Here's the button code: <button> Add task </button> ...

htmlvuejs2

What is the process of turning an SVG element into a clickable link?

Is there a way to transform each element within an SVG image embedded in an HTML file into an active link? I want to create an SVG image with clickable elements. Here is a snippet of the SVG image: <svg version="1.1" id="Layer_1" xmlns="http://www.w3 ...

javascriptjqueryhtmlsvg

Using JQuery to specify an attribute as "required" along with a value does not function as expected

Something seems off with this: $("#elementId").attr("required", "true"); In Chrome and Firefox, the DOM either displays required as the attribute (with no value) or required="" (empty value). Interestingly, it doesn't make a difference what value w ...

javascriptjqueryhtml

How can you transfer data from a jQuery function to a designated div element?

I'm struggling to transfer data from a function to a specific div, but I can't seem to make it work. I'm in the process of creating a gallery viewer and all I want is to pass the counter variable, which I use to display images, and the total ...

javascriptjqueryhtmlcss

What is the best way to incorporate a text box along with a submit button that triggers a callback to a javascript function when clicked, utilizing either plain javascript or jQuery?

As a beginner in the world of JavaScript, I'm struggling to find the solution to this problem. Any assistance would be greatly welcomed. ...

javascriptjqueryhtml

Dividers afloat - expanding current script with multiple additions

I am currently utilizing this website as a hub for showcasing my various web projects. The jsfiddle code provided in response to this particular inquiry is exactly what I need, however, I am unsure of how to have multiple divs moving simultaneously acros ...

javascriptjquerycsshtml

How can I write the code to enable dragging the button for navigating to the next page?

<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)" aria-selected="undefined"> IPD</a> If I want the button to navigate to the next page when dragged, what code should I write? ...

javascriptjqueryhtml.net

Ways to differentiate between a desktop browser width of 1024px and a tablet width of 1024px with the help of jquery

So here's the issue I'm dealing with: I have scroll-based animation functions set up for desktop browsers, and different animations in place for tablet browsers. The challenge is to make these functions work on a desktop with a 1024px dimension. ...

javascriptjqueryhtmlcss

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Samsung mini devices experiencing issues displaying Unicode symbol (25be)

I'm currently facing an issue with an iconfont that I have included in my website. I am using Unicode symbols for the characters of the icons, and most of them are displaying correctly. However, there are a couple that are showing up as blank on the s ...

androidcssunicodeicon-fonts

The table width is malfunctioning on Firefox when viewed in HTML

I have been puzzled by the fact that I am unable to adjust the width of the table th in Firefox browser to the smallest value. However, in Chrome browser, this functionality works perfectly. I simply want to divide the values of my td into three rows as sh ...

javascripthtmlcssfirefoxprinting

What is the process for initializing the default/prefilled value of an input element within a mat-form-field when the page loads?

I'm looking to create an HTML element where the default data (stored in the variable 'preselectedValue') is automatically filled into the input field when the component loads. The user should then be able to directly edit this search string. ...

htmlangulartypescriptangular-material

What is the best way to load my CSS file using express.static?

How do I properly load my CSS file using express.static in Node.js? I have attempted various methods to link my stylesheet to my HTML file through Express, and I'm also interested in learning how to include images, JavaScript, and other assets to crea ...

javascripthtmlcssnode.jsexpress

Guide to implementing a slider in HTML to adjust the size of my canvas brush

Hey there, I'm looking to implement a slider functionality under my canvas that would allow users to change the brush size. Unfortunately, all my attempts so far have been unsuccessful. Can anyone lend a hand? Much appreciated! <canvas i ...

javascripthtmljquerycss

Troubleshoot redirect issues in JavaScript or PHP

I am facing a simple issue that is proving to be time-consuming to solve. The challenge that I am encountering involves an HTML form with 2 buttons. Here is the relevant code snippet: $html1 = "<div class='pai-forms'> <form ...

javascriptphpjqueryhtml

Hover functionality for the border animation is disabled, but the SlideToggle feature is operating smoothly

I am interested in changing the right border color of a DIV when another one is hovered over. I had to use a unique solution to make slideToggle work, so I assume this will require a different approach as well. Below is the detailed code: $(document).rea ...

jqueryhtmlcolorsjquery-animateborder

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

What could be the reason that the height: auto property is not creating a content area big enough to accommodate my content

When a user is not logged in, the header displays a logo and a login form that requires ample space. Once the user logs in, the full navigation menu appears in a smaller header size. To achieve this, adjusting the height:auto property of the "site-header" ...

htmlcssruby-on-rails

CSS Styling for Adjusting Table Cell Widths

In my HTML table, I am trying to set the overall width while ensuring that the label column does not become too wide. Although it functions correctly in Firefox 4, IE 9 seems to be completely ignoring the width property. <html> <head> <sty ...

htmlcssinternet-explorerfirefoxcross-browser