13

I am unsure on how to center my li elements in the light green space, just based off the green squares I've created around them. As of right now CSS is including the space taken up by the bullet points when centering, which I do not want.

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  margin-top: 40px;
  padding-left: 75px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  width: 100px;
  text-align: center;
}

.navlink {
  text-decoration: none;
  color: white;
}
<div id="square">
  <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
  </ul>
</div>

I've tried applying list-style-type: none; to ul, however this just hides the bullet points, the space they take up is still there.

Jean-François Fabre
  • 137,073
  • 23
  • 153
  • 219
Steel
  • 507
  • 4
  • 13
  • 3
    most likely the issue is just the margin and/or padding the browser applies to lists as a default. If you just set `margin:0;` and `padding:0;` to your ul and li styles, you should be able to then align or space it however you prefer. – ryantdecker Mar 27 '19 at 03:18
  • 2
    'which I do not want' - bullet points or the space taken, or both? – Vega Mar 27 '19 at 04:08

3 Answers3

12

It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:

Ideally you should just reset the padding instead of negative margins - see demo below:

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none; /* hide bullet points */
  padding-left: 0; /* ADDED */
}

li {
  margin-top: 40px;
  padding-left: 75px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  width: 100px;
  text-align: center;
}

.navlink {
  text-decoration: none;
  color: white;
}
<div id="square">
  <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
  </ul>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
1

Your given code almost ok just use one single line into style sheet in li style use below line 

 list-style-type: none;

New li style look like 

li {
    margin-top: 40px;
    padding-left: 75px;
    list-style-type: none;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 5px 20px 5px 20px;
    background-color: green;
    border-radius: 10px;
    width: 100px;
    text-align: center;
 }
Akbor
  • 1,280
  • 1
  • 9
  • 11
0

Simply add a margin-left to the <li> elemements of -40px to offset the margin added by the bullet points:

#square {
  position: fixed;
  width: 350px;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgb(230, 255, 230);
}

ul {
  position: relative;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
}

li {
  margin-top: 40px;
  margin-left: -40px;
  border-color: white;
  border-width: 2px;
  border-style: solid;
  padding: 5px 20px 5px 20px;
  background-color: green;
  border-radius: 10px;
  width: 100px;
  text-align: center;
  list-style-type: none;
}

.navlink {
  text-decoration: none;
  color: white;
}
<div id="square">
  <ul>
    <li><a class="navlink" href="#">Introduction</a></li>
    <li><a class="navlink" href="#">Middle</a></li>
    <li><a class="navlink" href="#">End</a></li>
  </ul>
</div>

list-style-type: none on the <ul> is optional.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • 2
    This works, thank you. But how did you know margin added by the bullet points was 40px? – Steel Mar 27 '19 at 03:17
  • You've identified the root cause (the default padding on the unordered list element) but it might make more sense to just set the padding of the UL to 0 instead of adding the negative margin to the LI. – ryantdecker Mar 27 '19 at 03:55