0

I am trying to have a centred list of numbers in a responsive page. The issue I am having is that as you adjust the screen width the list items inside the unordered list are no longer centred inside the containing div. I have removed the default padding on the ul element but I think something is missing to bring it all together. Can someone tell me where I am going wrong?

#content {
  background-color: yellow;
  overflow: hidden;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}

#heading {
  text-align: center;
}

#number_container {
  overflow: hidden;
  background-color: #07c;
  width: auto;
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
  display: list-item;
}

ul li a {
  float: left;
  padding: 5px;
  min-width: 35px;
  margin-right: 2px;
  min-height: 35px;
  line-height: 28px;
  color: #333;
  text-decoration: none;
  text-align: center;
  background-color: #fff;
  border: #fff solid 1px;
}
<div id="content">
  <div id="heading">Centered Text</div>
  <div id="number_container">
    <ul>
      <li><a id="1">1</a></li>
      <li><a id="2">2</a></li>
      <li><a id="3">3</a></li>
      <li><a id="4">4</a></li>
      <li><a id="5">5</a></li>
      <li><a id="6">6</a></li>
      <li><a id="7">7</a></li>
      <li><a id="8">8</a></li>
      <li><a id="9">9</a></li>
      <li><a id="10">10</a></li>
      <li><a id="11">11</a></li>
      <li><a id="12">12</a></li>
      <li><a id="13">13</a></li>
      <li><a id="14">14</a></li>
      <li><a id="15">15</a></li>
      <li><a id="16">16</a></li>
      <li><a id="17">17</a></li>
      <li><a id="18">10</a></li>
      <li><a id="19">11</a></li>
      <li><a id="20">12</a></li>
      <li><a id="21">13</a></li>
      <li><a id="22">14</a></li>
      <li><a id="23">15</a></li>
      <li><a id="24">16</a></li>
      <li><a id="25">17</a></li>
    </ul>
  </div>
</div>

Fiddle Link

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Dabbler00
  • 113
  • 1
  • 1
  • 8
  • can you pls provide me a jsfiddle – Firnas Dec 22 '15 at 02:58
  • it's a similar question to [this](http://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements) and [this](http://stackoverflow.com/questions/19527104/left-aligned-last-row-in-centered-grid-of-elements). – Stickers Dec 22 '15 at 03:00
  • @Pangloss, thanks for trying to find duplicates, I too tried this and SO also suggested some similar questions. However, I am not trying to align the list items on the last row to the center I am trying to align the whole ul to the center of the screen. The whole list is slightly off center when you shrink the screen. – Dabbler00 Dec 22 '15 at 13:16
  • @Mohamed fiddle added. – Dabbler00 Dec 22 '15 at 13:18
  • @Dabbler00 Sorry I was busy. Did you get the right answer? Or else I'll give a try for you. – Firnas Dec 22 '15 at 15:41

2 Answers2

1

Another edited version of my answer: Use these settings :

#number_container {
  overflow: hidden;
  background-color: #07c;
  text-align: justify;
}

ul {
  padding: 0;
}
li {
  display: inline-block;
  list-style: none;
}
ul li a {
  display: inline-block;
  padding: 5px 5px 3px 5px;
  margin: 5px;
  min-width: 35px;
  min-height: 35px;
  line-height: 37px;
  color: #333;
  text-decoration: none;
  text-align: center;
  background-color: #fff;
}

This aligns the last row of <li> elements left, which you apparently were aiming at. Another possibility would be text-align: center; for #number_container (see also my fiddle https://jsfiddle.net/f77ujsqb/1/ ), which aligns the last row centered.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • that works! Thanks a bunch. I was missing text-align center on the container and display inline block on the li. – Dabbler00 Dec 22 '15 at 20:10
  • just had another look. The list items in your fiddle are all center aligned. I have tried floating the items left but that just brings me back to square one. Any suggestions? – Dabbler00 Dec 22 '15 at 21:26
  • you can set `text-align: justify;` in `#number_container`, but then you won't have an even grid. but you wrote in your question that you want the list items centered inside the containing ul, and that's what I did before. – Johannes Dec 22 '15 at 22:31
  • `text-align: justify` did the trick. Can you submit this as an answer please. Apologies for my poor phrasing but thanks for sticking with me. – Dabbler00 Dec 24 '15 at 21:30
  • @Dabbler00 You are welcome! I edited my answer (`text-align: justify;`) so you can approve it as you asked for. – Johannes Dec 25 '15 at 02:44
0

remove the display from li

display: list-item;
Rovi
  • 259
  • 1
  • 3