Center-align a list with items floated to the left in a d-flex container

I'm attempting to create an inline list that resembles a grid with as many cards arranged horizontally as possible. However, I've encountered a problem - when I float the list items to the left, the text centering no longer functions and the list itself becomes left-aligned.

Below is an example of the card structure being loaded into the list item using AJAX .load()

<div class="my-card" style="width: 268px;">
    <a href="" class="card-text">
        <img class="card-img-top" src="http://placehold.it/268x280" alt="">
        <div class="card-body py-3 px-0">
            <div>Dolor labore duis eu eu qui officia aliqua minim.</div>
        </div>
    </a>
</div>

https://i.sstatic.net/DIahO.png

<div class="container-fluid">
        <div class="row">
            <div class="d-flex text-center">
                <ul class="list-inline">
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                    <li class="list-inline-item float-left"></li>
                </ul>
            </div>
        </div>
    </div>

This follows the same pattern, but the last items are centered in the list:

https://i.sstatic.net/ThIKV.png

<div class="container-fluid">
        <div class="row">
            <div class="d-flex">
                <ul class="list-inline text-center pl-3 justify-content-start">
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                    <li class="list-inline-item"></li>
                </ul>
            </div>
        </div>
    </div>

So, my main question is how can I center the list inside d-flex while floating the list items to the left? Any assistance would be greatly appreciated.

htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

To ensure the entire layout is centered while keeping the last row left aligned, it is recommended to include 4 empty spacer elements at the end of the list. In this scenario, using exactly 4 spacers is crucial as the maximum number across a row is 5....

It's important to utilize flexbox instead of floats for optimal results.

<div class="container-fluid">
    <ul class="row list-unstyled mx-auto text-center justify-content-center">
        <li class="col-auto">
            <div class="my-card" style="width: 268px;">
                <a href="" class="card-text">
                    <img class="card-img-top" src="http://placehold.it/268x280" alt="">
                    <div class="card-body py-3 px-0">
                        <div>Dolor labore duis eu eu qui officia aliqua minim.</div>
                    </div>
                </a>
            </div>
        </li>
        ... (more cards)

        <!-- 4 empty spacers at end for left justify cards on all viewports -->
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
        <li class="col-auto">
            <div class="my-card invisible" style="width: 268px;"></div>
        </li>
    </ul>
</div>

In my opinion, utilizing flexbox is the most effective way to center the entire layout and maintain left alignment on the last row regardless of the number of items and viewport width.

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

Dynamic burger menu navigation

I am in the process of designing a full-page navigation overlay for my website to ensure consistency across all devices. Currently, I have two buttons - one to display the overlay and another to hide it. I am considering whether it would be more effective ...

javascripthtmlcssnavigation

AngularJS experiencing issues with Bootstrap multiselect functionality

I am currently integrating bootstrap-multiselect into my AngularJS application. To do this, I've included the following scripts in my master page (index.html). <script src="/bower_components/jquery/dist/jquery.min.js"></script> <scrip ...

javascriptangularjstwitter-bootstrapselect

In search of a CSS selector that can target elements based on specific text contained within them

Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...

htmlcssseleniumselenium-webdriver

Is it possible to utilize CSS variables within a font lineup and ensure compatibility with older browsers?

Is it possible to utilize a CSS variable to store a font for cases where the user may not have the specified font installed? For example: :root { --common-font: Comic Sans MS; } .header1 { font-family: CoolFont1, var(--common-font); } Would o ...

htmlcsscss-variables

Angular service provided by MetronicApp

I've been working on integrating Angular services with the Metronic App. This is how I defined my service: angular.module('MetronicApp').service('shaperService', ['$http', function ($http) { this.shapers = function(param ...

htmlangularjs

Utilizing jQuery to convert letter input values into English: a step-by-step guide

I am developing a basic web application using Jquery. In this application, I aim to restrict user input language. For instance, if a user enters the Russian letter б in the input field, I want to automatically convert it to an English character. Below is ...

htmljquerycss

Tracking modifications in a text document using ajax (javascript)

After conducting extensive research, I have yet to find a solution that addresses the issue at hand. My current webpage features a text input field that triggers a function whenever its contents are changed, resulting in data being written to a text file. ...

javascriptphphtmlajaxserver

Is there a way to create a table that has varying columns for each row?

I am currently working with bootstrap4 and I am trying to create a table that has 3 columns in the first row and 4 columns in the following two rows. I want it to look like this: https://i.sstatic.net/nuI55.png Here is my existing table: <link href ...

htmlcssbootstrap-4html-table

What is the true functionality of the Bootstrap Grid system?

I am currently in the process of grasping how this functions. As an example, I have created columns and inserted <hr> for visualization purposes. This is what I have attempted thus far: I adjusted the row's margin to be -15px on both sides. C ...

csstwitter-bootstraptwitter-bootstrap-3

The issue I am facing is that my Contact Form is sending empty emails whenever someone visits the

I seem to be encountering an issue with my contact form. Every time I visit the page, it sends mysterious black emails. Moreover, whenever someone fills out the form and clicks send, another email is dispatched. I have been trying all day to figure out how ...

phphtmlformsemailcontacts

The speed at which Angular is hiding elements is too rapid for any animation to keep up with

Utilizing Angular 1.2 in conjunction with the animate.css library available at The animations I'm implementing are geared towards simple ng-show="somevalue". The ng-show animations are functioning properly, smoothly fading in. However, when the eleme ...

jquerycssasp.net-mvcangularjsanimation

AngularJS scope watch isn't firing as expected

In the scope, I store a filtering string for dates. $scope.myModel = {date:""}; Utilizing a jQuery datepicker, <input date-value="myModel.date" date-picker /> This directive updates the string through AngularJS - Attribute directive input value c ...

javascriptjqueryhtmlangularjs

What causes the "v-col" width to suddenly alter after adding the "bg-red rounded" class?

I'm struggling to organize the data into blocks using Vuetify. When I apply the "bg-red rounded" class to the "v-col", it alters the width of the column, resulting in an undesired grid structure. Here is the template section of my Vue file. Some data ...

cssvue.jsvuetifyjs3

Concealing the rear navigation button within the material carousel

I have a material css carousel, and I am trying to hide the back button on the first slide. I attempted to use the code below from a previous post The following code snippet prevents the user from looping through the carousel indefinitely. Stop looping i ...

javascriptjqueryhtmlcssmaterial-design

Using two divs, each containing different content, with one incorporating a tinymce editor, in order

There are two div elements in my code: <div id="ing" style="position:relative;"> <div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; "> </div> </div> After that, I set T ...

javascriptjquerycsstinymce

Using CSS to layer one element on top of another element

Check out this website at There seems to be an issue with the image being cut off. I am looking to have the content in div contentTextWill overlap the rightSideBar. Is this achievable? Below is the code snippet: <div class="contentWrapper"> <d ...

csshtml

Sorry, Computed styles are not available in IE 11 Edge DevTools

Currently facing an issue with a component element rendering differently on IE11, however the DevTools for both IE and Edge aren't showing any CSS in the Styles or Computed tab. What is the correct way to debug this situation? Comparison from left to ...

cssangularinternet-explorer-11microsoft-edgeie11-developer-tools

Struggling to Mask Password Input with Dots in HTML?

I am currently developing a User Registration System and I would like the password field to display as dots for security purposes. However, every time the page loads, the Email and Password fields are already filled in: Email: root Password: password ( ...

phphtmlcss

Vue.js - Problem with loading image on screen

Although I have experience with React, I am currently facing the challenge of using Vue for a code assessment for the first time. My struggle lies in creating a reusable image component with WAI-ARIA accessibility. Despite my efforts, I cannot get the imag ...

htmlimagevue.js

Footer remains attached to the bottom of the page while the content extends too far down

Having some trouble with my sticky footer - despite checking out various resources and examples, I can't seem to achieve the desired outcome. Update: I don't want the footer to be fixed. I want it to stay at the bottom of the screen if there isn ...

htmlcsswordpress