Mads Kristensen Mads Kristensen - 3 months ago 8
CSS Question

align li tag styled with css

I cannot understand why my li is floating like this:

Bullet

When I look at the JSFIDDLE they are aligned fine. Can anybody see what is wrong?



ul {
counter-reset: section;
list-style: none;
}
li {
margin: 0 0 10px 0;
line-height: 40px;
}
li:before {
content: counter(section);
counter-increment: section;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 20px 0 0;
border: 1px solid #ccc;
border-radius: 100%;
text-align: center;
}
**Updated code to question**

<div id="feature">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">

<!-- Seminariet bulletpoints -->
<h2>PÅ BAGGRUND AF SEMINARIET VIL DU</h2>

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

</div>
</div>
</div>
</div>

**Updated picture**

[![enter image description here][3]][3]




Answer

i guess the problem is that you have text-align:center on the li or on the ul ( as far as i can see from your screenshot, in your code everything is fine )

so you want to center the lis . they stay like that because every li has a different text length so they align correctly on the center of their parent ul

there are a number of ways to make them aligned on center and also nicely one on top of the other. this would be one of the solutions

EDIT centering ul the way you want it to look ( without text-align:center ) it's problematic so you need to use something like the snippet below

i think it will be much more responsive. if not, you can always use @media query to make it ' look good ' on smaller devices

( also made some example @media Queries )

ul {
  counter-reset: section;
  list-style: none;
  position:relative;

    padding:0;
    left:45%;
    display:inline-block;
}
li {
  margin: 0 0 10px 0;
  line-height: 40px;



}
li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 1px solid #ccc;
  border-radius: 100%;
  text-align: center;
 
 
}
h2 { 
text-align:center;
}
@media only screen and (max-width: 640px) {
ul {
  left:40%;
}

}
 @media only screen and (max-width: 425px) {
ul {
  left:35%;
}

}
 @media only screen and (max-width: 320px) {
ul {
  left:25%;
}

}
<div id="feature">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">

                    <!-- Seminariet bulletpoints -->
                    <h2>PÅ BAGGRUND AF SEMINARIET VIL DU</h2>
                    <div style="border: 1px solid black;">
                        <ul style="text-align:left">
                            <li>First item</li>
                            <li>Second item</li>
                            <li>Third item</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>