Error while centering ul in div

Question

Error while centering ul in div

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have the html below and your css.

As much as I try, I can not centralize the list ul in the div. This ul brings data from a survey to the bank. Where am I going wrong?

HTML

<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>

CSS

    <style>
    *
    {
        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 //////////////////

    </style>

css css3

asked by anonymous 13.04.2016 / 20:24

3 answers

Google Maps API does not load in Angular Java ERROR: javax.servlet.ServletException: javax / enterprise / context / spi / Contextual

score 0 · Answer 1

Good afternoon,

I believe in two points:

First - In your CSS already exists

text-align: center

No need to re-enter it at

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

And I believe it's 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;
}

score 0 · Answer 2

0

Have you tried centralizing this part of the css?

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

13.04.2016 / 20:33

score 0 · Answer 3

I did it.

To align div to center, margear 0 to all sides.

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

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

After this, just add the size of the div if 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>

As for aligning the contents of div to center, simply add estilo align

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

Thank you!