How to centralize elements inside an <ul>? - html

Question

Well, I have a site and it's happening something that I just can't fix.
I have a code like this:
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 50px;
text-align: center;
}
aside {
margin: auto;
margin-top: 20px;
}
aside li {
float: left;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>
So, the problem is that I want to centralize the li elements inside the ul, and I can't use text align because li is not text!
Can anyone help me?

Answer 1

is this what you want?
aside {
font-size: 150%;
font-family: fantasy;
font-variant: small-caps;
line-height: 2em;
background: rgba(187,219,136,0.75);
width: 90%;
height: 100px;
text-align: center;
}
aside{
margin: auto;
margin-top: 20px;
}
aside li{
display: inline-block;
padding: 0 2%;
font-size: 100%;
}
<aside>
<ul>
<li id="matematica">Matemática</li>
<li>Geografia</li>
<li>Física</li>
<li>História</li>
<li>Português</li>
<li id="quimica">Química</li>
</ul>
</aside>

Answer 2

try to :
aside li{
display:inline-block;
padding: 0 2%;
font-size: 100%;
}
remove the float too ;

Answer 3

If I understood correctly what you want to achieve, you may try changing:
aside li{
float: left;
padding: 0 2%;
font-size: 100%;
}
to
aside li{
display: inline;
padding: 0 2%;
font-size: 100%;
}
See it on JSFiddle and, also, check the attribute list-style-type for your <ul> tag.

Answer 4

I don't think you can select that circle because it's not an element. You can see it yourself. Just go to inspect and try to find that element.
But you can make a custom list.
<center><div id="b">
<div class="a"><span></span> List 1</div>
<div class="a"><span></span> List 2</div>
<div class="a"><span></span> List 3</div>
</div></center>
<style>
span {
background:black;
height:10px;
width:10px;
border-radius:30px;
display:inline-block;}
</style>