Error when centralizing ul in div

Question

I have the html below and your css.

No matter how hard I try, I’m not being able to centralize the ul list in the div. This ul brings data from a search to the database. Where I am missing?

  *
  {
    width:100%;
  }

  .body
  {	
    width: 100%;;
    margin: 0 auto;
  }

  ul {
      list-style-type:none;
      padding:0;
  }
////////////////////////// INICIO LISTAGENS ////////////////
div.divLista, div.divListaItens {
width:100%;
text-align:center;
}

ul.listaTopo, ul.listaRegistros {
clear:both;
width:95%;
}


ul li.listaTopoLi {
float:left;
background-color:#000; 
color:#fff;
height:50px;
line-height:50px;
vertical-align:middle;
text-align:center;
font-weight:bold;
margin: 0 auto;
padding:0;
}
////////////////////////// FIM LISTAGENS //////////////////

<div class="divListaItens">
 <ul class="listaRegistros">

    <li class='listaTopoLi' style='text-align:left; width:100px; background-color:#CCC; color:#FFF'>Super</li>     
    <li class='listaTopoLi' style='text-align:left; width:400px; background-color:#CCC; color:#FFF'>Carlos Alberto Rocha</li>
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#CCC; color:#FFF'>caca</li>     
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='' onclick="return verifica('Deseja Bloquear este Administrador?')" '><img src='_img/bloquear.png' height=30px  title='Bloquear Administrador' /></a></li>   
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='administradoresEditar.php?acao=form&idAdmin=1'><img src='_img/editar.png' height='30px' title='Editar Administrador' /></a></li>    
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#CCC; color:#FFF'><a href='' onclick="return verifica('Deseja Excluir este Administrador?')" '><img src='_img/excluir.png' height='30px'  title='Excluir Administrador'/></a></li>
 </ul>


  <ul class='listaRegistros'>
    <li class='listaTopoLi' style='text-align:left; width:100px; background-color:#FFF; color:#CCC'>Comum</li>
    <li class='listaTopoLi' style='text-align:left; width:400px; background-color:#FFF; color:#CCC'>José Mário</li>
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#FFF; color:#CCC'>jose</li>
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='' onclick="return verifica('Deseja Bloquear este Administrador?')" '><img src='_img/bloquear.png' height=30px  title='Bloquear Administrador' /></a></li>
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='administradoresEditar.php?acao=form&idAdmin=2'><img src='_img/editar.png' height='30px' title='Editar Administrador' /></a></li>
    <li class='listaTopoLi' style='text-align:center; width:100px; background-color:#FFF; color:#CCC'><a href='' onclick="return verifica('Deseja Excluir este Administrador?')" '><img src='_img/excluir.png' height='30px'  title='Excluir Administrador'/></a></li>
  </ul>

</div>      

Answer 1

In that part:

ul {
  list-style-type:none;
  padding:0;
}

Appendage: text-align: center;

Answer 2

Good Afternoon,

I believe in two points:

First - Your CSS already exists

text-align: center

No need to insert it again in

<li class='listaTopoLi' style='text-align:center;

And I believe it is prevailing the float attribute inserted in css:

ul li.listaTopoLi {
    float:left;
    background-color:#000; 
    color:#fff;
    height:50px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    font-weight:bold;
    margin: 0 auto;
    padding:0;
}

Answer 3

Have you tried putting the centering on this part of css?

ul {
    list-style-type:none;
    padding:0;
}

Answer 4

I got.

To Align the div downtown, just margear 0 everywhere.

div.divLista, div.divListaItens {
    margin: auto;
}

We then have the div aligned to the centre equal to reset of the page itself.

After that, just add the size of the div if case on each page it may have different value.

<div class="divLista" style="width:950px">
  <ul class="listaTopo">
     <li class="listaTopoLi" style="width:100px">DATA</li>
     <li class="listaTopoLi" style="width:150px">NOME</li>
     <li class="listaTopoLi" style="width:150px">EMAIL</li>
     <li class="listaTopoLi" style="width:150px">TELEFONE</li>
     <li class="listaTopoLi" style="width:100px">ASSUNTO</li>
     <li class="listaTopoLi" style="width:100px">RESPONDER</li>
     <li class="listaTopoLi" style="width:100px">RESPONDIDO</li>
     <li class="listaTopoLi" style="width:100px">EXCLUIR</li>
  </ul>
</div>

<div class="divListaItens" style="width:950px">
 <ul class="listaRegistros">

  <?php       
     $contador = 0;

     foreach( $emails as $chave=>$email)
     {
       $contador++;
       <li></li>
     }
  ?>
</ul>
</div>

On aligning the content of div to the center, just add the estilo align

div.divLista, div.divListaItens {
    margin: auto;
    text-align: center;
}

Thank you!