Ways to align images of the same size in a gallery using the margin: auto property

I have an image gallery within a div element named "container" with a specified width:70%. I need the images to be justified with auto margins.

This is the HTML code I am using: (There are 4 images in total)

<div class="container">         
    <ul class="grid gallery">
        <li class="animation-element">
            <figure>
                <img src="http://s33.postimg.org/638l2frnz/google_logo.png" alt="GINIS">
                <figcaption>
                    <h3>Name</h3>
                    <span>Description</span>
                </figcaption>
            </figure>
    </li>           
</div>

Below is the CSS code that accompanies the HTML:

.grid {
    width:100%;
    margin: 0 auto;
    list-style: none;
    text-align:left;}
    
.grid li {
  border:1px solid blue;
    box-shadow:0px 0px 1px #black;
    display: inline-block;
    width: 250px;
    margin-bottom:20px;
    font-family: "Ubuntu", sans-serif;
    text-align: left;
    position: relative;}

The above CSS code ensures that the (li) elements are properly justified.

You can view my code example here: http://codepen.io/anon/pen/QEybgL

javascripthtmlcss

Answer №1

Include the following CSS code to your stylesheet:

.grid {
    padding: 0;
    display: flex;
}

.grid > li {
    margin: auto auto 20px auto;
    justify-content: space-around;
}

Explanation:

flex value: This property creates a flex container for its direct children.

justify-content: It sets the alignment along the main axis, distributing any extra free space among items in the line when they reach maximum size or are inflexible. It also controls item alignment when they overflow the line.

space-around value: Items are evenly spaced with equal distance around them on the line (if all items have the same size).

margin: Setting a margin of auto within a flex container absorbs any additional space.

I recommend exploring more about flexbox.

Answer №2

Here's a simple solution for you. Another option is to utilize flex, as mentioned before, but don't forget to include back-up plans just in case. Flexibility may prove to be the ideal choice for a gallery layout.

If not, all you need to do is update your .grid class like so:

.grid {
    padding:0;
    list-style: none;
    text-align:center;
}

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

Transferring $scope information to resolve in $stateProvider.state

In the app.teams.show parent state, "team" is stored in $scope.data.team. From within a controller, I can access $scope.data.team and thus $scope.data.team.organization_id. The question is: How can I retrieve $scope.data.team.organization_id from inside t ...

javascriptajaxangularjsangularjs-scopeangularjs-routing

Trouble with AJAX request when trying to connect to a distant server

I am facing an issue with my AJAX request. When I test it on localhost, everything works perfectly fine. However, when I upload the code to a remote server, the request fails without any error messages. Even after checking in Firefox and Chrome, there ar ...

javascriptjqueryajax

Tips for styling an image and vCard within a Foundation accordion menu

I am working on a project that involves creating a list using an accordion feature to display names of individuals. When a user clicks on a person, I want the dropdown content to show their image and vcard details. How can I structure the content so that ...

javascriptjqueryhtmlcss

Enclose each set of objects, such as text, within a separate div, except for div elements

Is there a way to wrap each immediate group of objects that are not contained in a div with a wrap class? Input: var $code = 'Lorem Ipsum <p>Foo Bar</p> <div class="myclass"></div> <p>Foo Bar</p> <div clas ...

javascriptjqueryhtmlchildren

Attempting to utilize JavaScript in order to reset a text input field

I'm having trouble clearing a text field using this function. The alert is working but the field remains unchanged. What could be the issue? This function is designed to work on any text field. <!DOCTYPE html> <html> <head> ...

javascriptcss

Node.js Middleware Design Pattern: Connectivity Approach

I am embarking on a journey to learn Javascript, Node.js, Connect, and Express as part of my exploration into modern web development stacks. With a background in low-level networking, diving into Node.js' net and http modules was a smooth process for ...

javascriptnode.jsmiddlewarenode.js-connect

How to invoke a custom JavaScript function within an ejs template

In an ejs file, I included my own JavaScript function which I intended to use within that file. However, the function is not working as it is declared as undefined. Below is how I declared the function inside the ejs file: //my ejs file <script> ...

javascriptnode.jsejs

The jQuery `.load` function appears to be malfunctioning

I am having trouble getting my simple .load() function from jQuery to work. When I click on my DIV, nothing happens. However, the alert TEST does work. <div class="ing">CLICK HERE</div> <div id="overlay3-content"></div> <scrip ...

javascriptjqueryhtml

Instructions on converting text to a Float value and displaying the calculated result in a separate div

I am attempting to extract a string from a div, clear its content, then retrieve the actual price from ".skuBestPrice", remove any special characters, perform calculations to convert it into a floating point number, and display this number in the div ".tot ...

javascripthtmljquery

How can I center two images using a hover effect in WordPress?

When the mouse hovers over an image, it changes to another image. Everything works smoothly except for one issue - the image is not centered. Below is the code I am currently using: HTML: <figure> <a> <img class="hover" src="na ...

htmlcss

Sending multiple forms at once with a single submission

I've been racking my brain trying to determine the feasibility of a particular task. I am currently utilizing zen-cart as my shopping cart software, but what I really want to achieve is creating a hardcoded page featuring a list of 7-9 products. Each ...

javascriptjqueryformshtml

The problem with the first item title in the Jquery slider is causing

I've been working on setting up a Jquery slider (caroufredsel) in which I want certain elements to be displayed above the slider itself, outside of the wrapper. Everything is working fine except for the first slide! After spending several days trying ...

javascriptjqueryslidercaroufredsel

Creating Location-Specific Customer Data using AngularJS similar to Google Analytics

Looking to create a user registration map similar to Google Analytics without actually using Google Analytics. Can anyone provide assistance with this task? I am utilizing MVC, C#, Sql Server-2014, AngularJS, and jQuery for this project. Despite my efforts ...

javascriptc#angularjssql-serverasp.net-mvc-4

Guide to ensuring the navbar remains at the top of the webpage following an image

I am attempting to create a sticky navbar that stays at the top of the page once the header has been scrolled past. It should have a similar effect as shown in this example on codepen.io, but with the addition of an image that stretches across most of the ...

javascriptjqueryhtmlcss

Creating two submenus in the sidebar: a step-by-step guide

I am looking to implement a feature where clicking on the sidebar menu will reveal 2 submenus. Here is what I have implemented: $(document).ready(function () { $("[data-toggle]").click(function () { var toggle_el = $(this).data("toggle"); ...

htmljquerycssjquery-mobile-navbar

Ways to distinguish jquery response apart from using $.post method?

Using jquery $.post method: $.post( 'includes/studiesAjax/addTryb.php', {inputVL: inputVL}, function(res){ $("#container").html(res); } ); The response contains a long html code. I am interested in extracting data from ...

phpjqueryhtmlajaxpost

Opt for utilizing a global npm package over repeatedly installing it

Is there a way to utilize the globally installed package without needing to reinstall it every time we run npm i? Here's the scenario I have: I've set up a docker image with a specific package already installed (installation command in the Docker ...

javascriptdockernpm

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

Looking to display a div with a unique timer?

Is there a way to display different divs with unique classes for specific durations of time? For example, I want one div to show for 2000 ms with the class 'one', then another div to show for 4000 ms with the class 'two', followed by a ...

javascriptphpjqueryajax

Is there a way to manipulate a website's HTML on my local machine using code?

I am currently working on a project to create a program that can scan through a website and censor inappropriate language. While I have been able to manually edit the text using Chrome Dev tools, I am unsure of how to automate this process with code. I ha ...

javascriptpythonhtmlbeautifulsoup