Tips for aligning a horizontal list in the center when the viewport size is reduced?

My centered list looks great on larger screens, but when the screen size decreases, the extra items shift to the left instead of staying centered. I've tried a couple of different methods to fix this issue, but nothing has worked as desired.

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

First, I attempted the following CSS:

.edit-hours .form .inputs .table ul {
    list-style: none;
    padding-top: 20px;
    max-width: 760px;
    margin: auto;
}

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

Then I experimented with using a flex-box:

.edit-hours .form .inputs .table ul {
    list-style: none;
    padding-top: 20px;
    max-width: 760px;
    margin: auto;
    display: flex;
    justify-content: center;
}

https://i.sstatic.net/9kvNb.png

This is the HTML code I'm working with:

<div class="table">
    <ul>
        <li class="day">
            <input class="day-checkbox" type="checkbox" id="Mon">
            <label for="Mon">Monday</label>
        </li>
        ... (remaining list items continued here)
    </ul>
</div>

If anyone has a solution to help me achieve the desired centering effect, it would be greatly appreciated!

htmlcss

Answer №1

While the CSS code is missing, you can achieve the desired effect by setting display: inline for the li elements and using text-align: center on the parent ul:

.table ul {
  list-style: none;
  padding: 20px 0 0 0;
  max-width: 760px;
  text-align: center;
}

li {
  display: inline;
}
<div class="table">
  <ul>
    <li class="day">
      <input class="day-checkbox" type="checkbox" id="Mon">
      <label for="Mon">Monday</label>
    </li>
    <li class="day">
      <input class="day-checkbox" type="checkbox" id="Tue">
      <label for="Tue">Tuesday</label>
    </li>
    <li class="day">
      <input class="day-checkbox" type="checkbox" id="Wed">
      <label for="Wed">Wednesday</label>
    </li>
    <li class="day">
      <input class="day-checkbox" type="checkbox" id="Thu">
      <label for="Thu">Thursday</label>
    </li>
    <li class="day">
      <input class="day-checkbox" type="checkbox" id="Fri">
      <label for="Fri">Friday</label>
    </li>
    <li class="day">
      <input class="day-checkbox" type="checkbox" id="Sat">
      <label for="Sat">Saturday</label>
    </li>
    <li class="day">
      <input class="day-checkbox" type="checkbox" id="Sun">
      <label for="Sun">Sunday</label>
    </li>
  </ul>
</div>

Answer №2

It appears that you have positioned your elements within a container using the following CSS properties: 

display: flex; justify-content: center; flex-wrap: wrap;

This setup seems to be working fine.

<div className="flex justify-center flex-wrap bg-white text-white">
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</div>
  <div className="p-4 m-4 bg-pink-600 rounded-xl">text</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

Issue with CSS transition bug in Offcanvas on Android version 4.1.x

I am attempting to develop an offcanvas menu similar to the one featured in the Google Plus app. Currently, my code functions properly on most devices (android/ios) and browsers (ff, chrome, IE8+). The only issue I am encountering is on a Samsung Galaxy ...

htmlcssmenucss-transitions

Understanding XML parsing problems

I've decided to keep the live xml/atom-feed URL private, as it's hosted on LiveJournal. However, I'm a bit confused about how this all works: let XML_URL = "https://users.livejournal.com/<username>/data/atom"; $(function(){ ...

javascripthtmljqueryxmlatom-feed

Can javascript be used to swap out the folder in my URL?

I have been searching for solutions on how to change the language of my website using jQuery, but so far I have not found anything that works for me. Let's take my website as an example: www.domain.com I have separate folders for different languages. ...

javascriptjqueryhtml

Divide the cookies on the webpage

Today I was working on some coding tasks when I encountered an error: Cannot read properties of undefined (reading 'split') at getCookie ((index):38:49) at (index):47:31 The section of my code where the issue occurred (beginning at line ...

javascripthtmlcookies

Enhancing the appearance of div content in Angular by utilizing local template variables and material elements

Within this particular implementation, I have utilized an md-sidenav component with a local template variable #sidenavsearchArea. <md-sidenav #sidenavSearchArea align="" mode="push" opened="false"> sidenav content here.. </md-siden ...

cssangular

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations

Is it possible to use JavaScript for detecting third-party videos?

I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...

javascripthtmlflashvideo

What is the best way to extract data from the ajax.done() function?

My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...

phpjavascriptjqueryhtmlajax

What could be causing the 'margin-top' property not to function as expected?

Although I understand the concept of 'margin-collapse', I am puzzled as to why there is no visible 10 px margin on the top of the first box here. The top box, which has the id 'first', should have a 10px margin above it. If this method ...

cssmargin

"Utilize jQuery to target and highlight specific HTML elements when redirecting

I am working with a list of elements and I want to be able to redirect the focus to a specific element using a URL. <div id="20"></div> <div id="21"></div> <div id="22"></div> // example url http://localhost: ...

htmlcss

Effective HTML element placement with CSS styling

My HTML code includes a form containing a table. Take a look: This is the Code I'm Using: <html> <head></head> <body> <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: rela ...

htmlcssweb-applicationsxhtml

What is the process for including a favicon on my website?

I am trying to add a favicon to my ASP website similar to this: https://i.sstatic.net/1dhXO.png After reading through these discussions: Image icon beside the site URL How to put an image on the tab bar next to the title of the page on the browser? I add ...

htmlasp.net

Experiencing difficulties when attempting to access a relative URL in a Javascript xmlhttp object

Recently, I took on the task of managing an HTML/PHP/Javascript application that lacked proper directory structure; everything was crammed into one folder. My goal was to organize and modularize the files, so I decided to move them around. (*.inc files ...

javascriptphphtmlcssajax

Exit PopUp malfunctions and fails to function correctly

Hey everyone, I'm having an issue with my exit PopUp. It was working fine initially, but now it doesn't appear again when I scroll down the site page. Can someone please help me figure out what's going wrong? Sorry for any confusion, and tha ...

phpjqueryhtmlcsspopup

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

What is the best way to include a line break in a text sourced from a React state?

Here is a functional React code snippet: const about={ text1: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, qui?', text2: 'eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?&apos ...

htmlreactjs

The implementation of pre-wrap styling resulted in a significant increase in the indentation of the initial

I am currently developing a book blogging platform that allows users to submit book reviews through a form with a textarea field. To ensure that the user-entered paragraph breaks are displayed properly on the post's show page, I included a pre-wrap c ...

htmlcssbootstrap-4text-formatting

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

javascriptphphtmlformsvalidation

Understanding the response format in jQuery and AJAX

Can anyone advise on the optimal data format for communication with JavaScript? Should I stick to JSON or use plain HTML instead? Are there any alternatives worth considering? ...

jqueryhtmlajaxjson

Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

Hello, I am struggling to include a logo in my navbar and it's not being displayed. Despite researching similar queries from others, I still can't figure out why the image won't show up. I'm uncertain whether the issue lies within my co ...

htmlcssbootstrap-5