Center a list of elements in a page

how to center an unordered list in html
center li in ul vertically
align ul horizontally css
html center; list bullets
horizontal list css
center ul in div
ul content center
bootstrap ul center

I'd like to center a list of elements in a page without redimensioning the elements and at the same time, fit as much as possible in the same row. I manage to do it with several @media rules for each screen size from 1 element per row up to 4 elements, but I'd like to know if there is a way to do it in a way that it would fit whatever the width of the page is. Here is what I've tried and works:

.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}
<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

If I understood correctly you want to center all the items that fit on one line - then you can use justify-content to replace the media queries

DEMO

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}

How do I center list items inside a UL element?, Doesn't matter if the menu is in a fixed or fluid width environment, we just want the menu elements to be centered in the parent element; The menu will be a  Centering an element with CSS has always been easy for some things, hard for others. Here is the full list of how to center with CSS, with modern CSS techniques as well. Published Mar 21, 2018, Last Updated Apr 27, 2019

What I like to do when trying to accomplish this is setting text-align: center; on the container, (.container in your case). Then for the elements you're wanting to have be centered, setting the display property to display: inline-block; (.rectangle in your case). This will put as many elements that'll fit, on to one line. And anything that doesn't fit on to the next, still centered. When you resize your window, the elements move down to the next line as needed.

Change your css to this:

    .rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
  display: inline-block
}
   .container {
  /*display: flex;
  width: max-content;*/
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

You'll need to comment out the first two lines in .container for this to work properly. Hopefully this works for you!

EDIT: I thought originally you were wanting your elements to be centered. Now I'm not sure. If you're wanting elements that are on subsequent lines to be left aligned like in your snippet, change text-align: center; to text-align: left;.

.rectangle {
            width: 286px;
            height: 180px;
            margin-right: 2px;
            margin-left: 2px;
            margin-bottom: 24px;
            background: #aeaeae;
            display: inline-block;
        }

        .container {
            /*display: flex;
            width: max-content;*/
            flex-wrap: wrap;
            flex-direction: row;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
<div class="container">
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
    </div>

Centering List Items Horizontally (Slightly Trickier Than You Might , I am on the"build a tribute page", and I can't get the ul to center correctly (I used the you can see this a little bit better if you make the ul element an inline-block: Not everything here is needed to center the list items. You can cut the css down to this to get the same effect: ul {list-style-type: none;} ul li{display: inline-block;} .center{width: 100%;} .dots{ text-align: center; padding: 0px;} span{width: 100%;}

.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}
<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

Center an unordered list - Certification Projects, The UL element is set to text-align:center and the LI elements is set to I choose to make the stylesheet within the same page to make it easier  Just give the list centered text (e.g. ul.nav { text-align: center; }) and the list items inline-block (e.g. ul.nav li { display: inline-block; }). If you want to do it with margin for whatever reason, look into width: fit-content;. The current standard in coding menus is unordered lists.

Yes, you can achieve it in various ways without targeting media queries. Here is one example: lets wrap the .rectangle in another div

<div class="container">
  <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
    <div>
    <div class="rectangle"></div>
  </div>
</div>

Declare 25% width for each rectangle holding div:

*{
  box-sizing: border-box;
}
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container > div{
 width: 25%; float: left; padding-right: 5px; margin-bottom: 24px; height: 180px;  
}
.container > div::nth-child(4){
  padding-right: 0;
}
.rectangle{background: green; height: 180px; }

Here is the codepen

HTML / CSS centered list style menu, I'm having a little problem with an unordered list. div { text-align:center; } ul { padding:0; margin:0; } ul li { background:url(. for the first one! but the two below (i'm applying the same styling to 3 modules), the list element is left justified. Sections are areas of your page, such as a sidebar, footer. A widget is a page element such as a page, a blogroll, or anything else you can add from the “Page Elements” tab. You can include any HTML you like around the sections in your theme.

Styling a <ul> - centered li text, but bullet is left justified?, If you have an unordered list ul and want center horizontally its items wrap it with a div styled with display:table and margin:auto and assign  Center alignment place the list in the middle of the div element horizontally. You can use this to center align you website menus horizontally. To center align unordered list, you can use the CSS text align property with center as the value of this CSS property. This align the unordered list element horizontally center of the screen or div element. You may also like how to center align image inside div using HTML and CSS.

Center list items horizontally (Example), <style> .container { height: 200px; position: relative; border: 3px solid green; } .​vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform:  How To Center Your Website. Use a container element and set a specific max-width. A common width many websites use is 960px. To actually center the page, add margin: auto. The following example will center the website on screens that are wider than 500px. On screens that are less than 500px wide, it will span the whole of the page:

How To Center an Element Vertically, In recent implementations of CSS you can also use features from level 3, which allows centering absolutely positioned elements: Centering vertically in level 3  Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: This div element is centered. Note: Center aligning has no effect if the width property is not set (or set to 100%).

Comments
  • I viewed your code snippet and I agree it works. Are you trying to avoid writing media queries to get the same result? You'd need js for that.
  • Your question isn't clear, what exactly you want to achieve?
  • I'm trying to do the same thing as in the snippet but without media queries so it works whatever the width is. Do I really need js for that ? I mean it's not a problem but I thought there was a way I didn't know to do it entirely with css
  • Js isn't mandatory for it, ok, do you want 4 blocks in a row & the rest of the block will go next row?
  • i think the question is well written for a new user, even included a snippet, and pretty clear. good job.
  • justify-content is almost doing the job that I wanted. The only problem is that bottom elements are centered as well and therefore they are not aligned well with the others when there are fewer elements on the last row
  • then you should just add a flex-basis value that suits your needs then @sleiphir
  • I'm sorry but I don't understand how I could use flex-basis to align the elements to the left on the list while keeping the list centered on the page
  • You were right, I try to center the list, but align the element of the list to the left. The problem is that if I put text-align: left then the list is not centered anymore