Struggling to align a div container in the center

I'm having trouble centering my main container on the page. No matter what I try, it still seems to be floating to the left... I'm wrapping all my content in its own Div because I'm using a jQuery cycle background and I want to keep my content separate from the background. Unfortunately, I just can't seem to get the Div container to center properly... I'm hoping someone more experienced can help me figure this out!

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Homepage</title>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script>
        <script> 
        $(document).ready(function() {
            $('#slideshow').cycle({
            fx: 'fade', 
            pager: '#smallnav', 
            pause: 1, 
            speed: 1800,
            timeout: 3500 
            });         
            });
        </script>
</head>
<body>
    <div class="bx-overlay">
    </div>
    <div id="slideshow">
        <img src="images/3.jpg" alt="san diego"/>
        <img src="images/2.jpg" alt="bridge"/>
        <img src="images/1.jpg" alt="mountains"/>
        <img src="images/4.jpg" alt="waves"/>
        <img src="images/5.jpg" alt="americanflag"/>
        <img src="images/6.jpg" alt="football"/>
    </div>
    <div id="container">
        <div id="header">
        <img src="images/header.png">
        </div>
    </div>
</body>
</html>

And here is my CSS:

#slideshow, img.bgM { 
min-height: 100%; 
min-width: 1024px; 
width: 100%; 
height: auto; 
position: fixed; 
top: 0; 
left: 0; 
z-index: -9999; 
}
.bx-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: transparent url(images/pattern.png) repeat top left;
z-index: -1;
}
#container{
position: absolute;
text-align: center;
margin: 0 auto;
}
#header {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
}

Answer №1

When using this HTML code

    <div id="container">
    <div id="header">
    <img src="images/header.png">
    </div>

The container will occupy 100% of its parent's width

To center the header element

#header {
display: block; <-- unnecessary for a div element 
margin-left: auto; <-- overridden by the last margin property 
margin-right: auto; <-- overridden by the last margin property 
position: absolute; <-- can be removed  
text-align:center; <-- only necessary for text centering
margin:0 auto; <-- this will center with a specified width OR max-width
width: specify a value;
}

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

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

Display images fetched using ajax requests

Looking to retrieve the image source path using the code below: $.ajax({ url: 'api/catalogs.php?action=fetchimg&CatalogId=' + d.CategoryId, type: 'GET', dataType: "json", success: function(response) { var path = respo ...

codeigniter jquery ajax form submission issue, works in all cases except when integrated

Recently, I experimented with submitting a form via jQuery ajax without using CodeIgniter in order to better understand how ajax functions. Everything seemed to work smoothly, but now I want to implement the same functionality within my CodeIgniter applica ...

Comparing getElementById with $('#element') for retrieving the length of an input field

Consider the following scenario: <input type="text" id="apple"> Why does the first code snippet work? $(document).ready(function () { alert($('#apple').val().length); }); However, why does the second code snippet not work as expecte ...

CSS: Header overlapping navigation menu, disrupting hover effects

While working on my website, I noticed an issue with the div#top element covering the menu. As a result, you can only hover over a link when directly under the text. Does anyone have any suggestions on how to resolve this? ...

Issue with Bootstrap jQuery dynamic table edit/delete/view button functionality not functioning as expected

Could really use some assistance with this issue. I have a DataTable that includes a button in the last column which offers options like Edit/Delete/View. When clicked, it should delete the entire row. However, I'm struggling to access the current ele ...

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

Unusual perspective of JSON with ng-jsoneditor in AngularJS

Currently, I have integrated ng-jsoneditor into my AngularJS application to display and format JSON data. I found guidance on how to implement this from both here and here. Here is the HTML code snippet: <div ng-jsoneditor="onLoad" ng-model="vm. ...

Is it possible to animate CSS Grid components?

Is it possible to animate a re-ordered set of elements in an array that are arranged using a CSS Grid layout? Check out this quick boilerplate ...

Is it possible for an SVG to derive its dimensions from the containing element?

I am currently in the process of transitioning a Vue/Vuetify application from using web fonts for Material Design Icons to utilizing SVG icons instead. With the web font, an example of a heading that includes an icon looks like this: <template> &l ...

Is it possible to exclusively utilize jQuery with ZURB Foundation 4 and exclude Zepto altogether?

I'm currently working on a project that involves incorporating jQuery. I decided to manually include jQuery in ZURB Foundation 4. As part of the process, I removed: <script> document.write('<script src=' + ( ...

Listen up, Javascript keyboard input recorder

I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...

Trouble displaying CSS content image in Internet Explorer

Usually, I use Chrome as my default browser. However, I recently decided to test whether my website functions properly on other browsers as well. In Chrome, the header displays my logo with great quality using content:url. But when I tried accessing my w ...

Shade the div if the name of the child element matches the location's hash

I am currently working on an AngularJS web project. My goal is to highlight a specific div when clicking on an anchor link. The structure of the HTML is as follows: <div interaction-list-item="" sfinx-interaction="interaction" class="ng-isolate-scope" ...

PHP does not properly interpret quotation marks when passed from an HTML form

My current setup involves a simple HTML form with a submit button that triggers my PHP script to process the input. However, I've encountered an issue where my PHP code fails to recognize the quotation mark when using str_replace function. Below is a ...

Remove a jQuery class from a parent, sibling, or child element

After implementing this jQuery code to toggle classes on elements within an unordered list, I'm not entirely convinced it's the most efficient approach. Are there any better alternatives to achieve the same effect? $(function() { $('nav ...

Tips on transferring a Rails variable to Ajax

Struggling to integrate a progress bar (Javascript) into my Ruby on Rails application, I am facing difficulties in passing values from the controller to JS for updating the bar. In my initial attempt, I used a basic global variable ($count), but it remain ...

JS Equal Heights is a JavaScript plugin designed to ensure

Good evening, A while back, I implemented a JavaScript code snippet to create equal height columns on my website. The initial script looked like this: <script type="text/javascript"> var maxHeight = 0; $(".level").each(function(){ maxHe ...

Using more than one submit button in an HTML form

I am attempting to include multiple buttons on a single form. I would like to perform different actions on the form depending on which submit button is clicked. <script type="text/javascript> $("#<portlet:namespace/>Form").submit(function( ...

Retrieve information from an array of objects by utilizing a separate array

There are two separate arrays provided below: ages = [20,40,60]; doctors = [{ "name": "Moruu", "age": 18, "sex": "Male", "region": "Africa" }, { "name": "Khol ...