3

Como deixar uma imagem no centro da tela tentei colocar um text-align:center e não funcionou.

Segue o meu código html:

<header>
      <img src="images/bg-header.png" id="bg-header">
        <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Cases</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Orçamento</a></li>
                <li><a href="#">Contato</a></li>            
        </ul>

      <img src="images/web-sky-logo.png" id="logo-header">
</header>

Obs.: A imagem que preciso renomear e a que esta com o id="logo-header" e ela tem que ficar centralizada no Google Chrome, Safari e Mozila.

3
  • 2
    Fica como dica também usar: header img#logo-header{ display: table; margin: 0 auto; } 19/05/2015 às 17:39
  • entao amigo e assim a resposta que marquei como correta funcionou ate entao pesquisei as tags com o link que foi passado para min pois eu antes usava a tag center e ela foi trocada por tex-algin center e foi me dada a resposta com essa tag bom funcionou eu nao manjo muito de html e vou pedindo ajuda e oque for funcionando marco como resposta porem se achou que esta errado gostaria de ver sua resposta assim pra min esta certo e é como te sisse nao manjo muito de html css porem se acha que esta incorreto gostaria que me mostra-se a forma certa =3 19/05/2015 às 18:07
  • a resposta do Jefferson não está errado não, muito menos a do Jeremias. A questão é que a sugestão do Jefferson acaba que adicionando mais conteúdo HTML, sendo que é possível centralizar a imagem apenas com CSS (Tanto que a resposta do Jeremias recebeu mais votos!). Mas nenhuma resposta está erra não! Inclusive a minha sugestão também funciona! 19/05/2015 às 19:01

2 Respostas 2

6

Crie a seguinte regra css:

header img{
        display: block;
        margin: auto;
    }
2

Faça assim:

<header>
      <p class="text-center"><img src="images/bg-header.png" id="bg-header"></p>
        <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Cases</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Orçamento</a></li>
                <li><a href="#">Contato</a></li>            
        </ul>

      <p class="text-center"><img src="images/web-sky-logo.png" id="logo-header"></p>
</header>

CSS:

.text-center{
  text-align: center;
}
8
  • amigo aproveitando seu post e uma boa pratica usar a tag <center>???? 19/05/2015 às 17:35
  • 1
    Pois é, a tag center foi depreciada no HTML. devmedia.com.br/tags-e-atributos-depreciados-na-html/28042 19/05/2015 às 17:37
  • hmmm entendi mais então não e muito bom ultilizar ela neh 19/05/2015 às 17:37
  • "A tag <center> por exemplo é corriqueiramente chamada de “tag do preguiçoso”, pois é bastante usada para centralizar elementos quando os mesmos deveriam ter tal efeito aplicado através de um estilo CSS. De tal forma, a partir da nova especificação o seu efeito fica abolido, inclusive o de usá-la em conjunto com uma tabela (<table>) para alinhar a mesma e seus respectivos elementos internos. Leia mais em: Tags e atributos depreciados na HTML devmedia.com.br/tags-e-atributos-depreciados-na-html/…" 19/05/2015 às 17:38
  • 2
    Olá @Kirito, se você NÃO estiver usando HTML5 não tem problema algum utiliza-la. Porém não é recomendável utilizar código em depreciação, ou seja, no HTML5 já não existe essa tag. Para consultar se uma tag está em uso ou não, pesquise no google a palavra tag + nomedatag por exemplo tag center o primeiro resultato geralmente é uma página do W3Schools que trás na sessão Definition and Usage a informação se ela está ou não depreciada.
    – KaduAmaral
    19/05/2015 às 17:40

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 .