How can I align images at the center of a div?

My div can hold up to four images, with a minimum of one. Currently, the images are aligned to the left within the container. I am looking to center align them regardless of how many images there are in the div.

This is the code snippet that I currently have:

<div id="bigImg" {if $ads_settings.enable_video && $listing.enable_video && $listing.video}style="display: none;"{/if}>
    <center>
        <a href="{$live_site}/images/listings/{$listing.images[0].picture}" class="thickbox" rel="image_gallery">
            <img src="{$live_site}/images/listings/bigThmb/{$listing.images[0].picture}" class="pic" onmouseover="this.className='pic_over';" onmouseout="this.className='pic'" alt="{$listing.title|strip_tags:false}" />
        </a>
    </center>
</div>

You can view the website where I want this functionality implemented here.

javascriptjqueryhtmlcss

Answer №1

To center the contents of your div with ID #bigImg, simply include the CSS style margin: 0 auto;.

Answer №2

include this in your CSS file

.bigimg div {margin: 0 auto;}
.bigimg div img {text-align: center; float: left;}

Add a new class and update the usage of <center> tags with <div> as shown below:

<div id="bigImg" class="bigimg" {if $ads_settings.enable_video && $listing.enable_video && $listing.video}style="display: none;"{/if}>
  <div>
    <a href="{$live_site}/images/listings/{$listing.images[0].picture}" class="thickbox" rel="image_gallery">
      <img src="{$live_site}/images/listings/bigThmb/{$listing.images[0].picture}" class="pic" onmouseover="this.className='pic_over';" onmouseout="this.className='pic'" alt="{$listing.title|strip_tags:false}" />
    </a>
  </div>
</div>

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

`HTTP Streaming with Axios in a Node JS Environment`

I am currently facing an issue while attempting to stream price data via HTTP (I'm surprised they aren't using websockets..). I usually use axios for making REST API requests, however, I am struggling to handle 'Transfer Encoding': &apo ...

javascriptnode.jshttpaxios

Show occurrences of an array categorized by date using JSON format

I'm interested in analyzing a JSON array to find the occurrences of a specific item by date. Let me demonstrate with the following JSON example: "data": [ { "tags": [ "foo", "bar", "hello", "world", " ...

javascriptarraysjsondate

Is there a RxJS equivalent of tap that disregards notification type?

Typically, a tap pipe is used for side effects like logging. In this scenario, the goal is simply to set the isLoading property to false. However, it's important that this action occurs regardless of whether the notification type is next or error. Thi ...

javascriptangulartypescriptrxjs

Encountering an error in Django: "Reverse for 'book' with the argument '(1,)' could not be found. Attempted pattern: '<int:flight_id/book\Z'"

Currently, I am in the process of learning the Django framework. Today, I experimented with retrieving a URL in an HTML template using the following code snippet: <form action="{% url 'book' flight.id %}" method="post"> ...

pythonhtmlsqldjangodjango-models

template for autocomplete in angular using kendoUI

Has anyone had success using a template with autocomplete? I attempted the demo on the site: template: '<span class="k-state-default"><img src=\"../../content/web/Customers/#:data.CustomerID#.jpg\" alt=\"#:data.CustomerID#&bs ...

javascriptangularjskendo-ui

Wait for another user keypress event in jQuery after a 0.5 second delay

Currently, I am working on developing a live search feature for my website. In order to reduce unnecessary requests and optimize performance, I am looking to implement a simple jQuery solution (while also ensuring that there is back-end flood control in pl ...

javascriptjqueryeventskeypressjquery-events

Combining information once constructing a complex array structure in JavaScript

My reduce function is successfully building multiple levels of data, but I have encountered an issue. Currently, it organizes the data by employee first, then by date, area, and job. While all the data is displayed correctly at each level, I am now attempt ...

javascriptvue.js

How can I detect breaks in intervals?

Consider the following ranges as examples: const ranges = [ [ 0, 10, ], [ 20, 30, ], [ 40, 50, ], ]; In this scenario, I am looking to identify the missing ranges between two given values. For instance, if the input ran ...

javascriptarraysalgorithmrange

Is there a quicker method for toggling the visibility of an html element?

Is there a more efficient method to show/hide over 20,000 DOM elements? I've noticed that using element.style.display = "none" is very slow. I suspect this is due to too many reflows in the browser. However, simply using element.style.visibility = ...

javascripthtml

Utilizing dynamic attributes in design with bootstrap and CSS. Our capabilities are limited in executing actions through selenium

https://i.stack.imgur.com/Bwbgh.jpg Upon reviewing the code snippet above, I have made an attempt to locate elements and execute actions in Selenium. Actions action = new Actions(driver); Initiating Control on Elements WebElement we = driver. ...

cssselenium

Extracting key values from JSON using Node.js

Trying to read a json file using nodejs and locating a specific key within the object is my current task: fs.readFile('./output.json', 'utf8', function(err, data) { if (err) throw err; console.log(Object.keys(data)); } ...

javascriptjsonnode.js

The ajax POST method fails to trigger in a Node.js environment

Having an issue with the POST request. It's necessary for updating info without page reload. Below is my pug code: .tinder--buttons form(id="form1") button#love(type="submit") i.fa.fa ...

javascriptajaxpostpug

Choose elements that are not contained within a certain designated element

I am looking to choose one or more elements that are NOT children of a specific element. <html> <body> <div> <p> <b> <i> don't pick me </i> </b> ...

javascriptangularjsselenium-webdrivercss-selectorsjqlite

What is the best way to perform an AJAX request in Typescript with JSON data?

Currently, I am delving into the realm of AJAX and encountering some hurdles when attempting to execute an AJAX request with parameters. Specifically, I am facing difficulties in sending JSON data: My approach involves utilizing Typescript in tandem with ...

phpjqueryjsonajaxtypescript

Unable to trigger event on Bootstrap 4 calendar

I have integrated the dateTimePicker functionality into my project. Below is the HTML code snippet I am using: <div class="col-sm-3"> <div class="form-group"> <label for="sdating_1"><i class="fa fa-calendar" aria-hidden=" ...

jquerybootstrap-4calendar

Fixing a dropdown menu with multiple levels

I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the ...

htmlcssstylus

The integration of VueJS with the Canva Button JS API amplifies the

I have been exploring Canva's Button JS API which can be found at My goal is to implement a modular approach in utilizing their API, only loading the CanvaJS when necessary. My implementation involves triggering the load function when a button is cli ...

javascriptvue.js

Mongoose: Imposing Requirements on Optional Fields

I have a Mongoose Schema setup like this: const PostSchema = new mongoose.Schema({ title: { type: String, required: true, }, content: { type: String, required: true, }, ...

javascriptmongodbmongoose

Selenium is unable to interact with iframes

I'm attempting to extract the Job Description and Job Requirements from this specific link using selenium. Check out my code below: driver = webdriver.Firefox() url = "https://www.jobsbank.gov.sg/ICMSPortal/portlets/JobBankHandler/SearchDetail.do?id= ...

pythonhtmlseleniumiframe

The pure css overlay does not display correctly on Chrome

Could you take a look at the link provided below (just widen the result window a bit) and let me know why there are white lines on top and on the sides of the boxes when the hover overlay is fully loaded? Even when I use a background image for those divs, ...

cssgoogle-chromehoveroverlayopacity