Align <ul><li> with 4 or 5 items

Question

I have a page in PHP that presents my products, some items have 4 sizes and others 5 (P, M, G, GG and XGG*). When I have 5 sizes, the alignment is correct, but with 4, it is aligned on the left, leaving space on the right. I need to leave this list always centralized, independent of 4 or 5 items.

<ul class="tamanhos">
                            <?php
                            if($produto[0]->venda_tamanho == 'grade')
                            {
                                $temg4 = false;
                                $temg3 = false;

                                foreach ($estoques as $estoque)
                                {
                                    if ($estoque->tamanho == 'xgg') {
                                        $temg3 = true;
                                    }
                                    if ($estoque->tamanho == 'xxgg') {
                                        $temg4 = true;
                                    }
                                    ?>
                                    <li class="tamanho-item">
                                        <span class="tam"><?= $estoque->tamanho ?></span>
                                        <?php
                                        if ($estoque->qtde > 0){
                                            ?>
                                            <select name="tamanho[<?= $estoque->tamanho ?>]" class="slct-tamanho" data-kit="<?= $produto[0]->kit ?>">
                                                <option value="0">0</option>
                                                <?php
                                                for ($i=1; $i <= $estoque->qtde; $i++) {
                                                    ?><option value="<?=$i;?>"><?=$i;?></option><?php
                                                }
                                                ?>
                                            </select>
                                            <?php
                                        }else{
                                            ?>
                                            <a href="<?= base_url('produtos/avisePopup/'.$produto[0]->slug.'/'.$estoque->tamanho) ?>" class="avise-btn">
                                                Avise-me
                                            </a>
                                            <?php
                                        }
                                        ?>
                                    </li>
                                    <?php
                                }
                            }elseif($produto[0]->venda_tamanho == 'unico'){
                                ?>
                                <li class="tamanho-item">
                                    <span class="tam"></span>
                                    <select name="tamanho[u]" class="slct-tamanho" data-kit="<?= $produto[0]->kit ?>">
                                        <option value="0">0</option>
                                        <?php
                                        for ($i=1; $i <= $produto[0]->estoque_u; $i++)
                                        {
                                            ?>
                                            <option value="<?=$i;?>"><?=$i;?></option>
                                            <?php
                                        }
                                        ?>
                                    </select>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>

Answer 1

You can place your list within the following tag:

<div align="center">
  sua lista centralizada
</div> 

Or create within css a rule and call in tag

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
    }
</style>

<div class="wrapper">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>