2

O código abaixo está pronto para centralizar nos dispositivos móveis automaticamente, mas no desktop ele fica no lado esquerdo, gostaria de poder centralizá-lo.

No desktop: inserir a descrição da imagem aqui

Nos dispositivos móveis: inserir a descrição da imagem aqui

Gostaria de ajuda para deixar sempre centralizado.

        <!-- Título -->
        <nav class="nav-extended">
            <div class="nav-wrapper center">
                <img style="width: 200px; height: 200px; margin-top: 25px;" src="imagem/livro.jpg" alt="" class="circle">
                <a href="#" class="brand-logo center" style="margin-top: 225px">Empório Belém</a>
            </div>

            <!-- Abas -->
            <div class="nav-wrapper" style="margin-top: 50px">
                <ul class="tabs tabs-transparent">
                    <li class="tab"><a href="#home" class="active">Home</a></li>
                    <li class="tab"><a href="#contato">Contato</a></li>
                    <li class="tab"><a href="#adm">Adminstrador</a></li>
                </ul>
            </div>
        </nav>
2
  • Dá uma olhada nessa classe aqui: .brand-logo que está no <a> que envolve o logo. Talvez ele tenha um padding ou um margin que esteja interferindo. Mas olhando na imagem, os dois estão pra direita. 4/09/2019 às 18:25
  • Na div do nav-wrapper, tenta por width: 100% para esticar todos os itens, ou por text-align:center para colocar o conteúdo no centro. 4/09/2019 às 18:26

1 Resposta 1

4

Cara vc tem que usar a classe .tabs-fixed-width no componente, tem isso descrito na documentação http://archives.materializecss.com/0.100.2/tabs.html

inserir a descrição da imagem aqui

Segue o código com o componente ajustado como acima:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    
    
    
</style>
</head>
<body>
    
        <!-- Título -->
        <nav class="nav-extended">
            <div class="nav-wrapper center">
                <img style="width: 200px; height: 200px; margin-top: 25px;" src="imagem/livro.jpg" alt="" class="circle">
                <a href="#" class="brand-logo center" style="margin-top: 225px">Empório Belém</a>
            </div>

            <!-- Abas -->
            <div class="nav-wrapper" style="margin-top: 50px">
                <ul class="tabs tabs-transparent tabs-fixed-width">
                    <li class="tab"><a href="#home" class="active">Home</a></li>
                    <li class="tab"><a href="#contato">Contato</a></li>
                    <li class="tab"><a href="#adm">Adminstrador</a></li>
                </ul>
            </div>
        </nav>    
    
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>


Opção 2

Se quer centralizar o componente como um todo, mas não quer "expandir" as tabs, vc pode usar o Grid do Materialize, vc tem que criar uma row com um col e offset e colocar as Tabs dentro, vai ficar assim. Consulte a documentação do Grid http://archives.materializecss.com/0.100.2/grid.html

inserir a descrição da imagem aqui

Código da imagem acima:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>



</style>
</head>

<body>

    <!-- Título -->
    <nav class="nav-extended">
        <div class="nav-wrapper center">
            <img style="width: 200px; height: 200px; margin-top: 25px;" src="imagem/livro.jpg" alt="" class="circle">
            <a href="#" class="brand-logo center" style="margin-top: 225px">Empório Belém</a>
        </div>

        <!-- Abas -->


        <div class="row">
            <div class="col s4 offset-s4">
                <div class="nav-wrapper" style="margin-top: 50px">
                    <ul class="tabs tabs-transparent ">
                        <li class="tab"><a href="#home" class="active">Home</a></li>
                        <li class="tab"><a href="#contato">Contato</a></li>
                        <li class="tab"><a href="#adm">Adminstrador</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>

</html>

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 .