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 №3

For those aiming to align it in the middle, simply include

a top: 50%; attribute to the .upbutton selector

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

After the initial submission, the Bootstrap placeholder for the Select Option is only displayed

I'm attempting to create a placeholder for my dropdown with multiple options using Angular and Bootstrap. However, it seems like I may be doing something incorrectly. I created an option for a placeholder such as please select and placed it at the top ...

htmlangulartwitter-bootstrap

Preserve line breaks within HTML text

Utilizing the powerful combination of Angular 5 and Firebase, I have successfully implemented a feature to store and retrieve movie review information. However, an interesting issue arises when it comes to line breaks in the reviews. While creating and edi ...

htmlangularfirebasefirebase-realtime-database

Problems with navigation alignment in Flask website due to HTML, CSS, and

Here's a snapshot of my current website design: website I'm attempting to place the Login & Sign up buttons in line with the rest of the navigation bar. I've tried various methods without success so far. My attempts include adjusting text a ...

htmlcssflask

Create a dynamic HTML page using JavaScript

When I click on the following links: How can I create a new page using JavaScript? Create and dynamically append elements I'm looking to dynamically add HTML elements with JavaScript within a div, but I don't want my code to become overly comp ...

javascripthtmlcss

navigating to the start of a hyperlink

I'm having issues with scrolling to anchors and encountering 3 specific problems: If I hover over two panels and click a link to one of them, nothing happens. When I'm on section D and click on section C, it scrolls to the end of section C. ...

javascriptjqueryhtmlcss

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

How can I incorporate random variables and functions into an if-else function when using Jquery to make #divId droppable?

I have most of my code working as I want it to, except for some basic CSS adjustments that need to be made. In a specific part of my code where I am using $("#divId").droppable({over: function(), I want to add 2 other functions and have one of them execute ...

jqueryhtml

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...

htmlangulartypescriptaccessibilityjaws-screen-reader

The challenge of website sizing issues with window scaling and the overlooked initial-scale value in HTML

After encountering sizing issues on Windows 10 due to default scaling set at 125%, I attempted to replicate the issue by adjusting the Scale on Ubuntu. My attempt to fix the size by modifying the initial-scale value did not yield any results: document.que ...

htmlreactjsmaterial-uiresizeresponsive

Generate visual representations of data sorted by category using AngularJS components

I am facing an unusual issue with Highcharts and Angularjs 1.6 integration. I have implemented components to display graphs based on the chart type. Below is an example of the JSON data structure: "Widgets":[ { "Id":1, "description":"Tes ...

javascripthtmlangularjsjsonhighcharts

"Getting Started with Respond.js: A Step-by-Step

I've been struggling to find clear instructions on how to properly set up respond.js. Should I just unzip it into the htdocs folder, or do I only need respond.min.js in there? Then, do I simply reference the file like this... <script src="respon ...

javascriptphphtmlcss

What could be causing flexbox not to shrink to fit after wrapping its elements?

My goal is to create a flexbox with a maximum width that allows elements to wrap beyond that width without affecting the overall size of the flexbox's "row." The issue I am encountering is that when an element stretches beyond the maximum width and w ...

htmlcssflexbox

Incorporating an external script within a Next.js application

I've been having trouble incorporating an external JavaScript source into my Next.js application and I keep encountering the following error: Failed to execute 'write' on 'Document': It isn't possible to write into a documen ...

javascripthtmlreactjsnext.js

Tips for maintaining an active link using CSS

I am looking to create a hover effect for links that remains active when the user is on a specific page. Essentially, I want a background to appear behind the link when it is visited. Below is the HTML code: <div class="menudiv"> <div id="menu"& ...

phphtmlcssmenu

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

divs adjust their size based on how many are placed in a single row

I'm in the process of developing an online editing tool, and I'm interested to know if it's feasible to adjust the size of a <div> based on the number of visible div elements. For instance, I have a row with three columns, each set at ...

javascripthtmlresizewidthrow

I am encountering unexpected issues with the functionality of img srcset and sizes

Attempting to enhance the responsiveness of images on my website has led me to discover the srcset and sizes attributes. The objective is clear: If the screen size exceeds 600px or falls below 300px, a 250x250 image should be displayed For sizes in betw ...

htmlcssimageresponsive-designsrcset

The onchange() function for a multi-checkbox dropdown is failing to work as

Issue with Multiple Drop Down Checkbox Functionality: The first parameter is always received as undefined, and the onchange event only captures the value of the first checkbox selected. <select name="multicheckbox[]" multiple="multiple" class="4colacti ...

javascriptjqueryhtmlajax

Removing an active image from a bootstrap carousel: A step-by-step guide

Within my bootstrap carousel, I have added two buttons - one for uploading an image and the other for deleting the currently displayed image. However, I am unsure how to delete the active element. Can someone provide assistance with the code for this but ...

javascripthtmltwitter-bootstrapcarousel

Refreshing Div Element with PHP AJAX POST请求

It's me again. I'm feeling really frustrated with this code, it's starting to get on my nerves. I don't mean to keep bothering you, but I finally figured out where the issue was in the code and now I just need a little help with the fin ...

phpjqueryhtmlajax