Having trouble getting the div to center using margin: auto?

I have a fixed div that spans 100% of the screen width, with another div inside it that has a set width in pixels. Despite having a width: auto, it seems to be aligned to the left:

http://jsfiddle.net/jv87N

I am puzzled as to why margin: 0px auto; is not working.

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

Looking for a way to locate words enclosed in square brackets and change them into dynamic URLs using PHP?

In my quest to locate words enclosed in square brackets, such as [word], and form a dynamic URL, I encountered a challenge. Although I attempted using the str_replace() function to identify the word, it resulted in generating links in this format: <a ...

Attempting to change the src of a different image using jQuery upon clicking

I have two separate divs that change their background image source when clicked, which is working fine. However, I would like them to change the other image they are paired with. For example, if div 1 is clicked and becomes "open", then if div 2 is "open" ...

creating input type within an ng-repeat loop

I am currently working on a project where I have a series of input fields within different options. These input fields are being added dynamically to my page using ng-repeat. <input type="text"> Each option object contains the type of input field, ...

Customizing the select2 plugin in jQuery - A user-friendly alternative for select boxes

I am currently seeking a method to personalize the appearance of the Select2 plugin within a project. Although I have reviewed the documentation, I was unable to locate specific instructions on how to modify the styling of the select box. Please refer to ...

Trouble with the back button functionality following logout

Despite hours of research and following various links, I am still experiencing a problem where my page continues to load after logging out and clicking the back button. Below is the code I have tried for my log out page: protected void Page_Load(object se ...

Display each div one at a time

I am working on a script that should reveal my divs step by step. However, the current code only shows all the divs at once when clicked. How can I modify it to detect each individual div and unveil them one by one? For example, on the 1st click => expa ...

The Jquery script is ineffective for newly added elements

After creating an Ajax Form that functions well, I noticed that when the result of the form is another form, my script does not work for the new form generated. Is there a way to make the new form function like the old one? $(document).ready(function() ...

Creating stylish action buttons in R Shiny using a customized CSS template

I am looking to customize the layout of an actionButton in a Shiny app using a CSS file. The action button is defined in server.R and used as uiOutput() in ui.R as shown below: server.R shinyServer(function(input, output) { output$ActionButtonExample & ...

When the jquery loop fails to function

I need to dynamically add a class to a specific tag using jQuery depending on an if condition. Here's the code snippet: if ($(".asp:contains('Home')")) { $("ul.nav-pills a:contains('Home')"). parent().addClass('active ...

Get an item from within a collection of objects

I'm in the process of creating a board game, and I am looking to implement a feature where clicking on a specific location will turn it red. I have an array of divs, but I'm struggling to figure out how to target and change the color of a specifi ...

Animate the page transition with jQuery once the CSS animation finishes

My screen is split in two halves, and when you click on a side, they are supposed to slide open like curtains and then fade into another page. I have successfully created the animation using CSS and jQuery to add the appropriate class on the click event. ...

Align the inner container in the outer container-fluid

I'm struggling to center a container inside a container-fluid. Any suggestions on how to make it work? /* Setup Buttons Specific Styling */ .setup-bg { background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png"); background-repeat: no-repea ...

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

As a React beginner, I am facing issues with getting my CSS to work properly in my project. I know that CSS is not used directly in React, but rather interpreted as JavaScript using webpack and babel. What have I tried? I attempted to make changes to my w ...

Open a file using the fs module while ensuring the original file is preserved

I've been working on a NodeJS API that sends emails. Each time I need to send an email, I use the index.handlebars template. To customize the template before sending the email, I utilize the Node File System (fs) module to readFileSync() and then ap ...

Prevent certain elements in Bootstrap navbar from collapsing

I am currently working on designing a Bootstrap navbar that features the navigation items on the left side and the social/contact icons on the right. My goal is to have the nav items collapse when needed, but have the social/contact items remain visible fo ...

Ways to verify an iCheck located on the following page

Here is the code snippet I am currently working with: $("#add-new-size-grp").click( function (event) { event.preventDefault(); $.ajax({ type: "get", url:"ajax-get-sizes.php", success: function(result){ $("#sizeg ...

How can I wrap text in Angular for better readability?

I've created a calendar in my code that displays events for each day. However, some event descriptions are too long and get cut off on the display. Even after attempting to use Word Wrap, I still can't see the full text of these events unless I c ...

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

Utilizing C# dynamic variable within inline CSS for an element (MVC)

I'm currently struggling with trying to generate a random color for an element in a cshtml view. No matter what I attempt, it just won't cooperate. When I include the @ symbol, the color property doesn't highlight as expected, leading me to ...

IE 11 struggling with improper alignment of Flex Container

Having an issue with this code snippet: It works in Chrome, Firefox, and Edge but not in Internet Explorer 11. There are 3 elements (red, yellow, green) stacked vertically, with a blue element overlaying them taking up 50% of the height. Expected result: ...