Getting Your Content Centered Horizontally with Fixed Positioning in CSS

I would like the div to be centered horizontally with a fixed position, but it doesn't seem to work in my code. Can someone help me troubleshoot?

Check out the demo here.

HTML:

<div id="fancybox-thumbs" class="bottom" style="width: 675px;">
    <ul style="/* left: 633px; */">
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(1);"><img src="http://up.grdagrd.com/uploads/b1cf3b464aa26e0dd4cc2e3fabeae20a_80.jpg" style="width: 75px; height: 56px; top: -3px; left: 0px;"></a></li>
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(2);"><img src="http://up.grdagrd.com/uploads/d1c559d01ca52cc040e6d84fbd22a73c_80.jpg" style="width: 60px; height: 80px; top: -15px; left: 7px;"></a></li>
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(3);"><img src="http://up.grdagrd.com/uploads/076f90e118858482b7ad97fa6106b2b6_80.jpg" style="width: 60px; height: 80px; top: -15px; left: 7px;"></a></li>
    </ul>
</div>

CSS:

#fancybox-thumbs {
    position: fixed;
    height: 55px;
    overflow: hidden;
    z-index: 8050;
    position: fixed;
}
#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}
#fancybox-thumbs ul li.active {
    padding: 0;
    border: 1px solid #fff;
}
#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
}

Answer №1

When dealing with a fancybox-thumbs div that has a width of 675px, simply include left = 50% and adjust its position using negative margin-left:

#fancybox-thumbs {    
    height: 55px;
    overflow: hidden;
    z-index: 8050;
    position: fixed;
    width: 675px;
    left: 50%;
    margin-left: -337.5px;
}

Answer №2

I decided to experiment with the CSS

#fancybox-thumbs {
position: absolute;
height: 45px;
overflow: hidden;
z-index: 8050;
width: 90% !important;
top: 40%;
text-align: center;

}

Answer №3

To horizontally center the div, simply include margin:auto; in the css styling

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

Customize the Hidden Footer in Wordpress

I have a question about the footer code in my theme. I want to remove the "Powered by WordPress" text, but I can't seem to find the solution here. Can someone please help me with this? <?php do_action( 'maxwell_before_footer' ); ?> & ...

Tips for properly passing data from Ajax to PHP and extracting value from it

I'm curious about how to receive a value from Ajax and then send that value to PHP. Can anyone provide some guidance on this? Specifically, I need the percent value obtained from Ajax to be sent to $percent for option value. <div class="form-g ...

Dynamic CSS overlay based on database field content without requiring user interaction

Is there a way to automatically display overlays for specific options in a database field using Bootstrap code? The options are SOLD, CONTRACT, and NO. I need different overlays to appear for SOLD and CONTRACT, while no overlay is needed for the NO option ...

Rendering dynamic HTML content using EJS

I've created a blog application using Express and MongoDB, with EJS for rendering the data. My issue lies in the styling of the content to resemble a paragraph: <div class="show-post__content"> <%= post.body %> </div> The po ...

Tips for generating numerous sub div tags using jQuery

Is there a way to achieve this output with jQuery? I have working code here: . (See image for reference: https://i.stack.imgur.com/eOXiN.png) When trying to replicate the same using jQuery, I encountered an issue where there is no spacing between two imag ...

What is the reason that styled() does not apply styles to the Material-UI <TextField /> component?

I've managed to figure out a solution, but I'm curious about why this code is working: <TextField label='Zip Code' size='small' InputProps={{ style: { borderRadius: '.4rem' }, }} sx={{ width: & ...

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

implement a night mode with a single click

I attempted to implement a dark mode using jQuery, but it is not working as expected. I am seeking assistance. I would like to enable the dark mode when clicking on the #btntheme ID, but for some reason, it is not functioning correctly. My goal is to be ...

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

How can I code a script to import JSON data into MongoDB database?

I have a JSON file named "data.json" that contains an array of people's names as shown below: "data": [ { { "name":"John", "age":30, } { "name":"Mark", "age":45, } } ] I am ...

Concealing a Bootstrap table on an ASP.NET MVC View using jQuery

My website is powered by ASP.NET MVC and it showcases records in a Bootstrap 3 table. When there are no records, a div is displayed. Following the advice of another user, I adjusted the view to render the table along with the "no records" div simultaneousl ...

Guide to incorporating navigation buttons (back and forward) in a modal box

I have successfully created image thumbnails and linked them using the provided code. <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://maxcdn.bootstra ...

The marriage of a sticky and floating navigation bar using the power of Bootstrap 4

I am currently designing a navigation bar inspired by the layout on the EA GAMES website. While it functions perfectly in Chrome, I am encountering significant display issues in Internet Explorer. Any suggestions on how to troubleshoot and resolve this pro ...

What could be causing the div to not respond to ngAnimate?

Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the ...

The column on the right does not extend all the way to the bottom of the page

Hello, I currently have a website with the following design: I'm looking to extend the right column all the way down to the bottom of the body, even if there's not enough content to push it down. How can I accomplish this using CSS? Here is the ...

Split a number in PHP into individual HTML tags for formatting

Is there a way to split the number 12345 into individual digits using PHP like this: <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> ...

Could there be a coding issue stopping <div class="rating"> from aligning more centrally along the horizontal axis on the screen?

Just wondering, could there be something in my code that's preventing <div class="rating"> from moving closer to the center? And is there a way to make it move closer horizontally? (On a side note, CSS layout and positioning still puzz ...

Guide to showing a form following a button click in Angular 9

I am trying to create a feature on my page where when I click a button, a form will appear directly below it. Additionally, I would like the number of forms displayed to match the number of times the button is clicked. Being a newcomer to Angular 9, I am ...

Unable to modify the text color within a moving button

Working on a school project and implemented an animated button style from w3 schools. However, I'm struggling to change the text color within the button. Being new to HTML, I would greatly appreciate any insights or suggestions on what might be going ...

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Suppose I generate an HTML element in the following manner, <div id="unique-div" class="concealed">Hello, TB3</div> <div id="unique-div" class="hide-me">Greetings, TB4</div> <div id="u ...