0

Tenho uma página em PHP que apresenta os meus produtos, alguns itens possuem 4 tamanhos e outros 5 (P, M, G, GG e XGG*). Quando tenho 5 tamanhos, o alinhamento fica correto, mas com 4, ele fica alinhado na esquerda, deixando espaço na direita. Preciso deixar esta lista sempre centralizada, independente de 4 ou 5 itens.

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

1 Resposta 1

2

Você pode colocar tua lista dentro da seguinte tag:

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

Ou cria dentro do css uma regra e chama na 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>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .