How to Align Pictures in an Unordered List

I'm having trouble centering these images within the UL element. Despite researching solutions from other sources, I can't seem to apply them successfully in my specific case. Any assistance would be greatly appreciated. Thank you.

JSFiddle: https://jsfiddle.net/dvbL2d5y/1/

HTML

<div id="posts-wrap">
    <div id="primary">
        <div class="hentry">
            <div class="entry-content">
                <div id="equipment-gallery">
                    <ul class="medium-grid">
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#posts-wrap {
  padding: 30px 50px;
  text-align: center;
}

ul.medium-grid {
  margin: 0 auto;
}

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 20px;
}
htmlcss

Answer №1

Try implementing the following CSS code. I have eliminated the float property and incorporated display:inline-block.

 #articles-wrapper {
      padding: 20px 40px;
      text-align: center;
    }

    ul.small-grid {
      margin: 0 auto;
      padding: 0;
    }

    #photos-section li {
      display: inline-block;
      list-style: none;
      margin: 15px;
    }

Answer №2

After some tweaking, I've updated your code to help you out. To center an element using text-align: center, simply add inline-block to the element.

#posts-wrap {
  padding: 20px;
  text-align: center;
}

ul.medium-grid {
  display:inline-block;
  margin:0;
  padding:0;
}

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 20px;
}
<div id="posts-wrap">
    <div id="primary">
        <div class="hentry">
            <div class="entry-content">
                <div id="equipment-gallery">
                    <ul class="medium-grid">
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                        <li>
                            <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №3

Does this meet your expectations?

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 0 auto;
  display: block;
  width: 100%;
}

Answer №4

Update the style of the class "#equipment-gallery li" by removing "float:left" and adding "display:inline-block"

#equipment-gallery li {
  display: inline-block;
  list-style: none;
  margin: 20px;
}

Answer №5

#content-section {
  padding: 20px;
  text-align: center;
}

ul.large-grid {
     margin: 0 auto;
    display: inline-block;
    padding: 0;
    text-align: center;
}

#product-gallery li {
    float: none;
    list-style: none;
    margin: 20px;
    display: inline-block;
}

For a demonstration of this CSS, check out this link on JSFiddle https://jsfiddle.net/zdso82b7/1/

Answer №6

I utilized the flexbox concept within the ul tag to center align.

 ul.medium-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap row;
}

For a more in-depth understanding of flexbox, you can refer to CSS-Tricks A Complete Guide to Flexbox

#posts-wrap {
  padding: 20px;
  text-align: center;
}

ul.medium-grid {
  display: flex;
  justify-content: center;
  flex-flow: wrap row;
}

#equipment-gallery li {
  float: left;
  list-style: none;
  margin: 20px;
}
<div id="posts-wrap">
  <div id="primary">
    <div class="hentry">
      <div class="entry-content">
        <div id="equipment-gallery">
          <ul class="medium-grid">
            <li>
              <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
            </li>
            <li>
              <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
            </li>
            <li>
              <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
            </li>
            <li>
              <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
            </li>
            <li>
              <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
            </li>
            <li>
              <a href="/"><img src="https://dummyimage.com/100.png/09f/fff"></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </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

When accessing the defaultValue property of a select element, it will result in

Here is a typical HTML dropdown menu: <select name="email" id="email"> <option value="2" selected="selected">Before redirecting to PayPal</option> <option value="1">After payment is successful</option> <opti ...

javascriptjqueryhtml

Modifying form data when submitting a form

Is there a common or widely-used method for modifying or adding form values before they are serialized and sent to the server upon form submission? I'm looking for a way to change or add these values without having to recreate them. I've come ac ...

javascriptjqueryhtml

Guide on creating frozen columns in an Angular 2 table with the ability to scroll through multiple columns

Within my table, there are 3 columns that must always remain on the left side. Additionally, there is a column containing a grid where each element represents an hour of the day, requiring it to be scrollable. I have attempted various proposed solutions, ...

htmlcsstwitter-bootstrapangular

switch control navbar feature in Django

I am currently working on a project and I am attempting to manage the color change of the navbar logo. After visiting the "about" page on my application, I want the navbar to change color, with half of it turning yellow to better complement the purple back ...

htmlcssdjangotwitter-bootstrap

Manage the sequence in which the various paths of an SVG element are displayed

Searching for a way to display an image in HTML with a rounded dashed border? Take a look at the example below: https://i.sstatic.net/YrCZS.png The number of dashes and their colors can be controlled, similar to what you see in WhatsApp's status tab ...

javascripthtmlcsssvg

Ways to dynamically eliminate focus around text inputs

I have created an HTML page and here is the link to it: https://i.sstatic.net/n8UdU.png My main goal is to remove the black border around the text input on this page. The challenge I am facing is that the 'things to do' list is generated dynamic ...

javascripthtmljquerycssdom

Meteor - Utilizing If Statements in HTML Documents

Currently, I am utilizing an FS Collection named "MyUploads" for storing user-uploaded files. Within the HTML structure, there exists a submit button that needs to be displayed conditionally. The question at hand is: how can I create an if statement so tha ...

javascripthtmlmongodbmeteor

Issue encountered while implementing async functionality in AngularFireObject

I'm encountering difficulties with the async feature in AngularFireObject. Is there a solution available? Snippet from HomePage.ts: import { AngularFireObject } from 'angularfire2/database'; export class HomePage { profileData: Angu ...

htmlangulartypescriptfirebaseionic3

What is the best way to show JavaScript output with span style?

I have added a translation feature that allows users to switch paragraphs to French when clicked. Each paragraph now has the first word wrapped in a span with a CSS class that enlarges and colors the text. However, I am facing an issue where when switchi ...

javascripthtmlcss

Tips for inserting a pin into a designated location on an image map

Within my angular application, I have implemented an image map using the HTML usemap feature. Here is the code snippet: <img src="../../assets/floor2.jpg" usemap="#floor2Map"> <map name="floor2Map"> <area shape="pol ...

htmlcssangulartagsimagemap

Displaying information from a Node.js server on a React frontend

I have a question about building a simple REST API with Node.js and fetching mock data to render in React. Here is my progress so far: Node.js: const Joi = require("@hapi/joi"); const express = require("express"); const cors = require("cors"); const app ...

javascripthtmlnode.jsreactjs

Retrieving the HTML code from a webpage

I am currently using the following code to extract the HTML source code of a webpage: private static string RetrieveHTML(string websiteURL) { HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(websiteURL); request.UserA ...

c#htmlasp.netinformation-retrieval

Using jQuery to generate several div elements inside one main div

Given the parent div structure: <div class="large-9 columns"></div> I intend to add multiple child divs inside the parent: <div class="large-9 columns"> <div>JSON data point 1</div> <div>JSON data point 2</ ...

jqueryhtmljson

Adding an Icon to a Tab in Ant Design - A Step-by-Step Guide

Is there a way to include an icon before the title of each open tab? I am currently using the antd library for tab creation, which doesn't provide a direct option for adding icons. Here is my code snippet along with a link to the jsfiddle https://jsfi ...

javascriptcssreactjsantd

Tips on preventing duplicate data from being extracted from an HTML source with HtmlAgilityPack

In my project, I am utilizing HtmlAgilityPack to scrape data from an HTML Code source. Let me show you an example of the HTML structure: <div class="enum-container"> <div class="enum"> <span class="field-key">MD5</span> ...

c#htmlvb.netextracthtml-agility-pack

maintaining the alignment of one div's right boundary with another div's right boundary

---------------------- ----------------------------->edge X | | | | | logo | | dropdown menu ...

javascripthtmlcss

Ensure the div element remains fixed at the top of the page

I created a script to identify when I reach the navigation bar div element and then change its CSS to have a fixed position at the top. However, I am encountering an issue where instead of staying fixed, it jumps back to the beginning of the screen and fli ...

javascriptcss

What is the method for distributing additional width in a table among its columns?

Have you ever wondered how excess space in an HTML table is distributed among the columns? I too was curious about this, but couldn't find a definitive answer even after extensive searching. Therefore, I decided to create a simple test page to investi ...

htmlcssbrowserhtml-table

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

htmlcss

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

javascriptpythonhtmlgoogle-app-enginegql