Entrar Ainda não tem acesso?
3
respostas

Não consigo centralizar o meu mapa

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Aplicando gradientes

por Ricardo Gregorio Pereria
| 34k xp | 6 posts
    <main>
        <section class="principal">
            <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

            <img class="utensilius" src="utensilios.jpg" alt="Utensilius de um barbeiro.">

            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

            <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </section>

        <section class="mapa">
            <h3 class="titulo-principal">Nosso estabelecimento</h3>
            <p>Nosso estabelecimento está localizado no coração da cidade.</p>

            <div class="mapa-conteudo">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4483278365396!2d-46.63466568562861!3d-23.588249068469487!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum!5e0!3m2!1spt-BR!2sbr!4v1568814489656!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>
        </section>

        <section class="beneficios">
            <h3 class="titulo-principal">Benefícios</h3>

        <div class="conteudo-beneficios">
            <ul class="lista-beneficios">
                <li class="itens">Atendimento aos Clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
                <li class="itens">Pontualidade</li>
                <li class="itens">Limpeza</li>
            </ul><img class="imagem-beneficios" src="beneficios.jpg" class="imagembeneficios">
        </div>

        <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        </section>
    </main>

    <footer>
        <img src="logo-branco.png">
        <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
    </footer>
</body>
3 respostas
por Ricardo Gregorio Pereria
| 34k xp | 6 posts

meu CSS

.banner{ width: 100%; }

.titulo-principal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }

.principal{ padding: 3em 0; background: #FEFEFE; width: 940px; margin: 0 auto; }

.principal p { margin: 0 0 1em; }

.principal strong { font-weight: bold; }

.principal em { font-style: italic; }

.utensilius { width: 120px; float: left; margin: 0 20px 20px 0; }

.mapa { padding: 3em 0; background: linear-gradient(#FEFEFE ,#888888); }

.mapa-conteudo { width: 940px; margin: 0 auto; }

.mapa p { margin : 0 0 2em; text-align: center; }

.beneficios { padding: 3em 0; background: #888888; }

.conteudo-beneficios{ width: 640px; margin: 0 auto; }

.lista-beneficios { width: 40%; display: inline-block; vertical-align: top; }

.itens { line-height: 1.5; }

.itens:first-child{ font-weight: bold; }

.imagem-beneficios { width: 60%; }

.video { width: 560px; margin: 2em auto; }

por Noberto Luis Martins Ferreira Filho
| 127.3k xp | 77 posts
Frontend developer

nao consegui identificar exatamente o que você gostaria de centralizar, talvez se você conseguir postar um print do que deseja fazer(da aula, por exemplo) ajuda.

mas eu fiz abaixo um sugestão para ver se lhe ajuda.

main{
display: flex;
flex-ditection: column;
align-items: center;
}

.mapa { 
padding: 3em 0;
background: linear-gradient(#FEFEFE ,#888888); 
display: flex;
flex-ditection: column;
align-items: flex-start;
}

.mapa-conteudo{
 width: 940px;
 margin: 0 auto;
 align-self: center;
}
por Heloisa Nascimento Araujo
| 91.1k xp | 3 posts

Talvez se vc mudar o valor do ''width="" na tag do vídeo iframe no HTML possa te dar a solução. talvez para uns 70% resolva.

<div class="mapa-conteudo">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4483278365396!2d-46.63466568562861!3d-23.588249068469487!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum!5e0!3m2!1spt-BR!2sbr!4v1568814489656!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>