On an iPad, a margin-centered button will unexpectedly shift to the left

I have a button element:

<div id="body">
    <button>Hello</button>
</div>

Here is the CSS styling for the button:

#body{
    width:400px;
    margin:0 auto;
    background:#eee;
    border:1px solid #ccc;
}
button {
    display: block;
    margin: 0 auto;
}

When viewing on an iPad, it seems to shift to the left.

Check out this example to see the issue: http://jsfiddle.net/c2HLe/9/

Note. This question is similar to a previous one, but I've simplified the structure so that people can focus better on the problem.

Answer №1

To properly center your button with margin: 0 auto;, ensure that you specify the width of the button as well. Take a look at an example like this for reference.

Another method you can try is shown in this demonstration.

#body{
    text-align: center;
}
button {
    display: inline-block;
}

It's important to note that if the total width of the container (including margin, border, padding, and content) exceeds 1024px (iPad viewport width) in your original CSS, it may lead to unexpected outcomes. Keep this consideration in mind while designing.

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

Enhancing user interfaces with jQuery by updating DOM elements

Can anyone help me figure out how to update a webpage so it functions as a report that multiple people can contribute to? I'm using forms to collect data and want it to instantly display under the correct category headings. Currently, I'm using j ...

When the window is resized, Div escapes from view

My issue is that whenever I resize the browser, the div moves out of the window. I am using the jQuery scroll to plugin for navigating through divs. Oddly enough, when I resize the #home div, everything seems to work fine. However, when I resize other divs ...

Experiencing repeated error exceptions when clicking multiple buttons

We have a feature that allows users to Like, Dislike, and Comment. If a user clicks on the Like button multiple times, an error with the code Exc_Bad_Access[Code=1] is displayed. The code snippet below is where this error occurs. -(IBAction)sendLike:(id)s ...

Insert an additional view into a UITabBarController

I am working with a UITabController and have set up 3 different UIViewControllers, each representing a tab. Within one of the tabs, I am trying to add a subview (specifically, I want to replace the current content with a different view). This is my curre ...

What is the best way to post on LinkedIn using an iOS app?

My current situation involves a valid accessToken that I have used to access user profile information. However, when attempting to follow the steps below using this token, I am consistently receiving a statusCode = 401 linkedinHelper.authorizeSuccess({ ...

Unable to change the alignment to the left in the CSS styling

My table has th elements with a text-align: left property. I tried to override this with text-align: center in my CSS, but it's not working. Can anyone suggest a reason why? Here is my table: <table class="days_table" align="center"> <thea ...

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

Issues with CSS and JavaScript functionality persist within the Flask framework

Having trouble with CSS and JavaScript on my website hosted via Flask framework on PythonAnywhere. Here is the directory structure: home/dubspher/mysite/ - README.md - app.py - index.html Static/ - css - fonts - images - js - sass Original HTM ...

What is the purpose of overriding a method that has not been implemented in the superclass?

I am puzzled by the need to use the override keyword in front of func declarations when implementing the required functions of the UICollectionViewDataSource protocol in my FriendsController class. This seems unnecessary since these functions are not imple ...

HTML/CSS - Troubleshooting Animation Issues

I am currently experimenting with different website animations and implementing responsive design. However, I encountered an issue when trying to apply these changes to my header, which also affects the .heading element. It seems that there is a problem w ...

Tips on how to include a unique style sheet for IE8 in WordPress

Struggling with responsive behavior in IE8, some parts of my Wordpress website at are not displaying correctly due to issues with the @import query. To tackle this problem, I am considering creating a separate style sheet for IE6, 7, and 8 using the follo ...

Ways to identify a disconnected RTCPeerConnection

Currently, I am exploring a WebRTC demo on my Chrome browser and have successfully set up a video conference. However, I am facing an issue when one of the peers disconnects, such as refreshing the browser. I am unsure how to detect this disconnection on t ...

Having issues extracting information from easports.com due to difficulties with the <ea-elements-loader> element

Recently, I've been developing a Python WebScraper to extract data (such as wins and losses) from our FIFA ProClub by crawling various websites. While I successfully implemented it on a third-party website using BeautifulSoup and requests, I encounter ...

Can we use ToggleClass to animate elements using jQuery?

I have a section on my website where I want to implement an expand feature. I am currently using jQuery's toggleClass function to achieve this effect. jQuery('.menux').click(function() { jQuery(this).toggleClass('is-active&a ...

The search functionality on iOS is experiencing some technical issues

I am currently facing an issue with the search functionality in my project. When I type something in the UISearchbar, the search results are not displaying correctly. I suspect that the issue may be due to white spaces between the words in the data. Intere ...

What is the best way to transfer the value of a radio button, retrieved from a database, to a textbox?

Greetings, I am trying to figure out how to pass the value of a radio button to a textbox using jQuery and PHP. The radio buttons are generated dynamically based on rows from my database, so I set the row ID as the ID for each radio button. However, the co ...

Excessive text overflowing in a chat interface can be resolved through CSS styling

After conducting a thorough search, it appears that very few individuals are taking this important element into consideration. I currently have a chat interface set up with a div element containing a ul, which then houses li elements that contain p element ...

Can you explain the functionality of the combination selector "AB," where "A" and "B" represent any selectors?

I've been delving into the concept of the "combination selector" by referring to resources on MDN. This selector involves selecting elements that match both criteria A and B simultaneously when they are placed together. Can someone shed some light on ...

Get real-time input values

Struggling to retrieve input value in real-time? The goal is to dynamically update the bottom buttons. The first X should match the number of carrots specified in the input above, and the second X will be calculated by a script. The key is to ensure that ...

Using an npm package to include CSS styles in a stylesheet

I created an NPM package that includes a CSS file that needs to be included in my main CSS file. In a typical HTML CSS website, I would need to write @import url("./node_modules/web-creative-fonts/index.css") but what I really want is to simplify ...