Centering a table horizontally using CSS when its position is set to absolute

I currently have 5 HTML pages with identical code. The code snippet looks like this:

<div id='generic'>
</div>

All 5 pages are linked to an external CSS file that contains the following styling:

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

Within each of these 5 pages, I have inserted a table structured as follows:

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

This table consists of only one row. In this single row, I need to randomly select a number between 1 and 10 which will determine the number of td elements present in the row. Therefore, one page might display 2 td's while another displays 6 td's, and so on. My objective is to maintain a consistent vertical position for the table across all pages, yet ensure horizontal alignment. Due to the possibility of additional paragraphs before or after the table on various pages, I must utilize position absolute. This positioning allows me to achieve uniform vertical placement of the table. How can I center each table horizontally? When I mention horizontal alignment, I am referring to having equal whitespace both to the left and right of the table regardless of the number of td's present.

margin: 0 auto;

The above margin styling does not provide desired results. It’s important to note that I do not have access to CSS3 features and I am specifically designing for compatibility with IE8.

Answer №1

margin: 0 auto does not apply to absolute positioned elements. To center it, you need to position it absolutely in the middle. You can achieve this by shifting it left 50% and adjusting the left margin to negative half of the element's width.

#contentBox {
 position: absolute;
 width: 800px;
 left: 50%;
 margin-left: -400px; /* Half the width of the element */
}

This will center it in the middle of its parent container.

Make sure that the parent container's position is set to relative.

http://jsfiddle.net/d3Gkw/9/

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

Designing a scrollbar for a tr element using HTML and CSS

I am struggling to create a scrollbar for the inner table that is not being displayed within its container. The container has a yellow background while the table itself is blue. My goal is to have a scroll bar specifically within the table. For more info ...

What is the best way to make this relative path function in JavaScript?

My file structure is organized in the following way: multiple folders a subfolder _includes getStatisticsTable.php _templates StatisticsWrapper.html Within StatisticsWrapper.html, I am using jQuery's .get() method to fetch external data which ...

How can I extract the URL from the event listener in Cordova's in-app browser event and then automatically close it once a specific URL is reached?

In my journey with ionic version 1 (just starting out with ionic & angularjs), I encountered an issue while trying to close the in app browser upon reaching a specific URL. The problem arises from the fact that the event triggered on "loadstart" is o ...

jQuery - Modify Turn.js to exclusively implement the page Peel effect

I am attempting to implement the peel effect from turn.js into my code, where hovering over the bottom right corner of the page causes it to peel slightly and appear as if it is bending upwards. I specifically want only the peel effect and not the entire ...

Transmit an array in a post request with Node.js using the application/x-www-form-urlencoded content type

After attempting to send a post request to an API with post parameters as an array, I encountered difficulties. Here is how it can be done using cURL: curl http://localhost:3000/check_amounts -d amounts[]=15 \ -d amounts[]=30 I then tried to ach ...

Can someone explain the method for displaying or concealing a menu based on scrolling direction?

https://i.stack.imgur.com/tpDx0.jpg I want to hide this menu when scrolling down and show it when scrolling up. The code for my menu bot is: <script> var previousScroll = 0; $(window).scroll(function(event){ v ...

What is the best way to incorporate a color-changing animation into a countdown border, resembling a spinner?

I am looking to implement a timer using jQuery that will start once this circle on the page is reached. The idea is for the border color (currently white) to progressively change to red, resembling a loading spinner effect commonly seen online. After reach ...

Ensuring the cookie remains active throughout various subdomains

After implementing code to set a cookie on example.com, I noticed an issue with it carrying over to the subdomain dogs.example.com. <script> document.cookie="cid1={{utm_campaign}}; path=/;" </script> The {{}} is part of Google-Tag-Manager s ...

Unlocking the Power of Combining JMVC and Server-side MVC Models

It's been a few days since I posted this question here and still no response. I also tried posting it on forum.javascriptMVC.com and finally got an answer, but I'm looking for more insights. Here's my question: After reading the documentat ...

Having issues updating table with Javascript after form submit in IE and Edge browsers

My current setup involves using Contact Form 7 in Wordpress to store data in a MySQL Database with Submit-Form. Now, I am working on reloading a table containing this data after the form submission. Here is the script I am currently using: /* FORM RELOAD ...

Guide to implementing a datepicker on a webpage using Laravel

I am having trouble displaying the datepicker using the code below in my Laravel 4.2 application on Firefox. Is there a better way to display datepickers? Are there any CDNs available for this purpose? <table class="table table-striped"> <t ...

Navigate to the final element of a mapped array

My current project includes a Message component that showcases all messages, whether incoming or outgoing, within a single thread. One feature I am aiming to implement involves ensuring that the most recent message, a freshly typed one, or an incoming mes ...

Determine the Total of a Column in jqgrid

Hey there, I'm looking for a way to calculate the total sum of the "montant" column in my jqgrid and then display it below the grid as "Total: *total amount*". Here is the code for my grid: <sjg:grid id="gridtable" caption="Quittance Payé ...

Load data into data tables through AJAX request

I'm currently working on implementing datatables and I'm facing an issue with populating my data table using an AJAX call. Here is the snippet of my AJAX call: $('#call_analysis_basic_table').DataTable ({ "ajax": { "url": " ...

Exploring the power of Angular JS and Ionic by parsing data from a JSON

I'm currently developing an App with the IONIC framework and Angular JS, utilizing the Tinder cards feature recently introduced by Ionic (http://ionicframework.com/blog/tinder-for-x/). My goal is to read from a JSON file and use it as storage for my a ...

Tips for choosing a class with a leading space in the name

Struggling with an issue here. I'm attempting to adjust the CSS of a specific div element that is being created dynamically. The current output looks something like this: <div class=" class-name"></div> It seems there is an extra space b ...

Jquery code failing to trigger any response

Recently, I quickly created a jQuery script to dynamically populate a paragraph element in order to easily switch between player and server interaction options. However, I am currently facing an issue where my script does not populate as expected. I have a ...

Challenge with the contrast of text color on dark mode with a backdrop of light color texture (image)

Currently, I am using Bootstrap 4 and I have set a light coloured .png image as the background for the navbar and body. The footer area has a dark background with off-white text colour. By default, the text colour is black to complement the light-coloured ...

Guide to securely authenticate on Google Drive API asynchronously with the help of AngularJS and HTML

Is it possible for someone to help me figure out how to authenticate asynchronously with the Google Drive API using AngularJS and HTML? I seem to be stuck on the gapi.auth.authorize call because the callback function is not being called. Below is a snippet ...

Exploring the functionality of Angular directives for bidirectional data binding with object references

In my custom Angular directive (v1.4.3), I am passing two bindings. The first binding is an Object with 2-way binding (model: '=') that can either be an Array or a single Object like [{something: 'foo'}, {something: 'moo'}, ...