How to centralize elements inside an
?

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"><a href="matematica.html" title="Ver resumos de Matemática">Matemática</a></li>
        <li><a href="geografia.html" title="Ver resumos de Geografia">Geografia</a></li>
        <li><a href="fisica.html" title="Ver resumos de Física">Física</a></li>
        <li><a href="historia.html" title="Ver resumos de História">História</a></li>
        <li><a href="portugues.html" title="Ver resumos de Português">Português</a></li>
        <li id="quimica"><a href="quimica.html" title="Ver resumos de Química">Química</a></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?

Possible duplicate of [Text align of an unordered list item](https://stackoverflow.com/questions/11328489/text-align-of-an-unordered-list-item) — AlleXyS, Jan 28 '18 at 13:47

score 0 · Answer 1 · answered Jan 28 '18 at 13:46

0

try to :

aside li{
 display:inline-block;
 padding: 0 2%;
 font-size: 100%;
}

remove the float too ;

answered Jan 28 '18 at 13:46

andrew s zachary

167
2
14

score 0 · Accepted Answer · answered Jan 28 '18 at 14:05

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"><a href="matematica.html" title="Ver resumos de Matemática">Matemática</a></li>
        <li><a href="geografia.html" title="Ver resumos de Geografia">Geografia</a></li>
        <li><a href="fisica.html" title="Ver resumos de Física">Física</a></li>
        <li><a href="historia.html" title="Ver resumos de História">História</a></li>
        <li><a href="portugues.html" title="Ver resumos de Português">Português</a></li>
        <li id="quimica"><a href="quimica.html" title="Ver resumos de Química">Química</a></li>
      </ul>
    </aside>

can you green tick(accept the solution) the answer so every one knows that this is working answer. — Nihal, Jan 29 '18 at 04:01

MattAllegro · Answer 3 · 2018-01-28T14:19:48.137

0

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.

edited Jan 28 '18 at 14:19

answered Jan 28 '18 at 14:08

MattAllegro

6,455
5
45
52

How to centralize elements inside an ?

3 Answers3

How to centralize elements inside an
?