How to center an unnumbered list within a DIV while aligning the remaining LI items in the last row to the left

Using the latest version of Bootstrap, I am trying to create an unordered list that displays images in a grid-like format:

<div id="featured-products" class="container">

      <ul>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
      </ul>

</div>

To center the unordered list, I have used text-align: center:

ul {
    list-style-type: none;
    text-align: center;
    margin-bottom: 0px;
    padding-left: 0;
    padding-right: 0;
}

li {
    display: inline;
    padding-left: 0px;
    padding-right: 10px;
}

The issue arises when the last row is not aligned properly to the left if it is incomplete, meaning a list item is missing.

Is there a solution to align the last row to the left while keeping the unordered list centered within the container? And this solution should be responsive as well.

htmlcss

Answer №1

Ensure the list container is centered, not its contents.

Take a look at this demonstration 

ul {
  max-width: 960px;
  margin: auto;
}

It's worth exploring Mansonry for creating visually appealing image galleries

Answer №2

div { background-color: blue; text-align: center; // this will center the content; margin-bottom: 10px; padding-left: 20px; padding-right: 20px; width:600px; margin:0 auto; // this will horizontally center the div; } 

p {
    display: block;
    padding-left: 5px;
    padding-right: 5px;
    background:green;
    width:200px;
    height:50px;
}

centering the content in the div first, then adjust alignment as needed for specific elements.

Visit our website for more examples

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

The alignment of my divs is completely off

While working on my website, I've encountered a bit of a snag. I'm having trouble getting my divs to line up correctly for events, news, and three middle descriptions. Here's the code (please excuse any messiness...I'm in the process o ...

htmlcssalignment

Adapt your design to different screen sizes with Bootstrap 4

There will be a significant amount of typing required for this task. I have a page that needs some design adjustments when the screen size is reduced. This includes elements of menus switching positions and additional design features on certain fields. C ...

htmlcssresponsive-designbootstrap-4responsive

Unresponsive Toggle Button on Bootstrap Navigation Bar

Whenever I resize the window and try to click the navigation toggle button, it doesn't seem to work. The button is unresponsive. Can someone please help me figure out what the issue could be? <nav class="navbar fixed-top navbar-expand-lg navba ...

htmlcssbootstrap-4

Using Jquery and Ajax to retrieve data from a database with the help of PHP

I am facing an issue with my HTML page, it is too large to share but here is the ajax/jquery code I am working with to access PHP file variables. threadPage.html <script type="text/javascript"> $.ajax({ url : & ...

javascriptphphtmljqueryajax

The Angular material checkbox has a mind of its own, deciding to uncheck

I am having an issue with a list displayed as checkboxes using angular-material (Angular 7). Below, I will provide the code snippets for both the .html and .ts files. Every time I click on a checkbox, it gets checked but then immediately becomes unchecked ...

htmlangulartypescriptangular-material

Remain on the current webpage following form submission

I've been attempting to keep the current page active after submitting a form, but for some reason it's not working. After piecing together some code I found online, this is what I have in my process.php file: <?php // Collect Data $name = ...

phpjqueryajaxhtmlform-submit

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

javascripthtmlcssforms

Increasing the size of the center image by using CSS elements placed along the circumference

Is there a way to enlarge the center image by 1.25 times compared to the outer images? You can view the code on this codepen. For a simplified explanation of the code, check out this link. I have attempted to adjust the circle size but it ends up affectin ...

htmlcss

Create an interactive musical experience on a webpage using HTML

I'm a newcomer to web technology and I'm trying to dynamically play a music file using Python Django HTML. I have saved the file location in the database and am fetching it. <audio control><source src= {{track.songlocation}} type="audio ...

htmldjangopython-2.7

JavaScript: inscribe in a specific cell

I have a table cell within a div element and I am trying to display the date for the last Thursday in it: <body> <div> <table id="TableName" width="auto"> <thead> <tr> ... ...

javascriptjqueryhtml

How can I implement Jquery ajax calls in various JavaScript functions?

I'm encountering an issue with a particular function in my code function readComm(){ $.post("something.php", {read:"read"}, function(data){ retVal = $.trim(data).toString(); console.log(retVal); return retVal; }); } T ...

javascriptjqueryhtmlfunctionreturn-value

Compressed search bar when in mobile mode

My search bar is getting squashed on mobile devices. Any suggestions for fixing this issue? <div id="menu" class="py-4 d-flex justify-content-center"> <div class="row "> <div class="col-sm-auto "> ...

htmlbootstrap-4

Serpentine edge design

I have been experimenting with CSS and wondering if it's possible to create a wrapped or twisted border effect. I want to achieve a design similar to the one shown in the picture. ...

htmlcssshapescss-shapes

Some URLs are not being loaded by the iframe tag

URL's are being passed dynamically and not all methods of the same action class are loading properly when accessed through the browser. For example, a method named loadDP may not be loading as expected. . $("#containerId").html(' <ifrme i ...

javascriptjqueryhtml

Why does "height: auto;" not function properly when I implement "float:left"?

I have set up three responsive columns and now I want to add a wrapping div for them. Although I have created the wrap div, it seems to only work with pixel values. I would prefer to use percentages or auto as I am aiming for a responsive layout. For exa ...

htmlcss

Creating a JSON data structure from HTML markup

My goal is to generate a json object by extracting data from a specific section of a wiki page (link). In the "Contents" section, I aim to gather all the information and structure it into an object as follows: { Arts : { "Performing Arts" : [{"Music" : [ ...

javascriptjqueryhtml

Modernizr - The proper method for integrating polyfills and implementing custom detection techniques

When it comes to incorporating new HTML5 form attributes and input types on a webpage, some browsers support them while others do not. This is why I am looking into using Modernizr - but I am encountering some challenges. From what I understand, Modernizr ...

htmlmodernizrpolyfills

Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it? If you need to see the code and the issue I'm des ...

htmlcss

Refreshing a specific div without refreshing the entire page is currently not functioning as expected

Currently, I am involved in Java Portlets and Websphereportal development On a specific page, there is an option to delete or update a profile picture. The layout of the page consists of two divisions within my JSP file: <div id="fotoDefault" style="d ...

jqueryajaxhtmlrefreshreload

Submit your document without relying on the web control feature

Currently, I am developing a fingerprint web application where I will be retrieving the user's fingerprint using ActiveX controls. My goal is to display the fingerprint image on the webpage without requiring users to manually select and upload it usi ...

phphtmlasp.netactivex