What is the best way to align a div block with images horizontally?

Trying to center a block of images horizontally, but struggling to get the alignment right. The HTML code looks like this:

<div id="dealerarea">
    <div id="dealercards">
    <!--Images by Javascript-->
    </div>
</div>

Here's the CSS:

#dealerarea{
position:absolute;
width:100%;
height:96px;
top:15px;
}
#dealercards{
display: block;
margin-left: auto;
margin-right: auto;
}

Any idea what might be going wrong? Appreciate any help!

Note: Can't set a fixed "width" to the inner div because it varies depending on the number of images.

htmlcssalignment

Answer №1

Ensure that your #dealercards have a specified width and margin:0 auto set in the CSS;

#dealercards
{
display: block;
margin:0 auto;
width:200px;
}

CHECK OUT THE DEMO HERE

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

Retrieve the complete HTML content of a webpage, including the values of all input fields

I'm attempting to save the entire webpage as an HTML file, including all previously entered values in input fields. I have already tried this method: $("#content").html(); However, it does not retain the values entered into input fields. $("#conten ...

javascriptjqueryhtml

How to align Material UI's <TextField> component in the middle of a React project

I'm struggling to align two <TextArea> components using material ui and React. Both of them are contained within the same <div> and share the same className. Despite trying to apply the !important rule in CSS, I haven't been able to ...

cssreactjsmaterial-ui

Learn how to collapse a collapsible section in Jquery Mobile by clicking on a link. Check out the example on JSFiddle

Is there a way to make the data-role collapsible collapse when clicking a tab link? I've tried using an on-click function without success. Any ideas or alternative solutions? Thanks. Check out my JSFiddle, where you can see that the tabs change but t ...

javascriptjqueryhtmljquery-mobile

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Struggling to extract the names and addresses of attractions from TripAdvisor using web scraping. The suspicion is that there might be an issue with how product.css(...) is written (possibly related to jsons?). Seeking guidance on correcting the code in o ...

pythoncssjsonweb-scrapingscrapy

Creating a continuous loop animation with CSS hover state

This piece of code creates an interesting effect when the text is hovered over. The slight shakiness adds a cool touch to it. However, this effect only occurs when the mouse is moved slowly; if the mouse remains stationary, the hover style takes precedence ...

jqueryhtmlcss

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss

The element 'Listitem' is unrecognized and cannot be found in the current context

I am currently working on an ASPX project in Visual Studio and have encountered an issue with a Drop Down field. It appears that the List Items are being ignored in my code. Can anyone advise me on what might be missing? <form runat="server"> &l ...

htmlasp.netvisual-studio

Is it possible to nest a <div> element inside a table in HTML code?

I am facing a requirement where I need the table rows inside a table, excluding the head row, to be scrollable. I attempted the following code, but it did not produce the desired outcome: <table id="applicantList1" border="1" align="left"> &l ...

htmlhtml-table

Choose only the values that start with a letter in the autocomplete list

I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...

html

Pop-up website opening with fixed dimensions error

On my webpage, I have a terminal where you can type commands and receive output. For example, typing "/unsolvedproblems" displays a list of unsolved problems with a hyperlink. I've been trying to make the hyperlink open in a popup window with a fixed ...

javascripthtmlhyperlinkpopup

What is the correct way to reset the styling of a web browser element, such as a <button>?

I have come across many sources advising me to reset HTML by manually resetting numerous individual properties, as demonstrated here: https://css-tricks.com/overriding-default-button-styles/ Another approach I discovered in CSS is simply using: button: {a ...

javascripthtmlcss

The Mui Switch track color fails to change when checked

I'm looking to customize the colors of the track for both checked and unchecked states. Currently, the track color is working for the unchecked state but defaults for the checked state: Checked State: https://i.stack.imgur.com/eGV4a.png Unchecked S ...

cssreactjsmaterial-ui

The HTML email appears distorted on Yahoo and Outlook, but displays correctly on all other platforms

Basically, I have an HTML email that was converted from a PSD file. I sliced the layers, made some changes to the URLs, and did a test email. The email looks fine on most email clients, but when I send it to Yahoo Mail or Hotmail/Outlook and open it in Chr ...

htmlcssemail

Bootstrap Carousel unable to transition to the next image

I cannot seem to interact with the arrows or dots on the carousel. How can I set it up to automatically transition to the next slide? I have tried various solutions but nothing seems to work. Any assistance would be greatly appreciated. Thank you! Below i ...

htmltwitter-bootstrapcarousel

The "initialized" event in angular2-tree-component fires prior to the data being loaded

Utilizing the angular2-tree-component, my goal is to display an already expanded tree. According to Angular docs, the initialized event should be used for expanding the tree after the data has been received: This event triggers after the tree model has ...

javascripthtmlangulartreeview

Is it possible to access forms and input fields in an AngularJS script without having to pass them from the HTML code?

Seeking a solution for input field validation, I have written code where input field states are passed from HTML to a script through a function. However, my goal is to directly retrieve the values in the script without passing them from the HTML when calli ...

javascriptangularjshtml

A guide on sending multiple input values using the same class name or id through ajax

My goal is to send multiple input values through AJAX to my PHP script. Everything works smoothly when I use getElementById. However, I have the functionality to add a child. The issue arises when it only retrieves values from the first child while iterati ...

javascriptphpjqueryajaxhtml

Creating a dropdown menu and adjusting the content below

Feeling stuck in one place with my code here: link The side navbar animation is almost what I want, but clicking one option opens all of them. Hoping for a similar effect like this page: link $(document).ready(function() { $('.interfejs, .proces ...

jqueryhtmlcss

Update the text on a button using a different button

function modify_button_text(){ //update the word from cat to dog. } <button id="button_1_id" >Cat</button> <br><br><br><br> <button id="modify_button_text_btn" >Change the Text of Above Button</button> ...

javascripthtmljquerycssarrays