Problema de centralização de banner.

Cosme Alves · 13 de julho de 2016

Oi pessoal tudo bem?

Estou dando uma editada em um site e tentei colocar um banner, porém ele não fica no meio, ele fica mais para o lado da esquerda...

Tentei usar o código <center></center> mas não resolveu... Será que alguém tem alguma solução?

:

Estou usando o seguinte código:

<center><div class="row"> 
                <div class="col-md-9">
                    <!-- Carousel -->
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                                                        <div class="item active">
                                <img src="template/img/1.jpg">
                            </div>
                                                        <div class="item ">
                                <img src="template/img/2.jpg">
                            </div>
                                                </div></center>

DiF · 13 de julho de 2016

@Cosme Alves Olá,

Tente posicionar o elemento do banner usando o CSS.

primeiro tente usar o margin assim:

#banner{
	margin: 0 auto;
}

Se não funcionar, podes usar o margin-left ou position.

Se escolher position, use o relative e altere o left o quanto for necessário.

exemplo online: https://jsfiddle.net/qgycsvky/1/

Cosme Alves · 13 de julho de 2016

@dif Obrigado pela ajuda, mas mesmo assim não resolveu... Tentei fazer uma mudança na linha <div id="carousel-example-generic" por <div id="banner" mas bugou o site...

DiF · 13 de julho de 2016

@Cosme Alves O meu código só foi um exemplo.

Só para mostrar o uso da propriedade. Sugiro estudar ela e aplicar no seu elemento.

O margin zero auto, resolve na maioria dos casos. Mas isso não quer dizer que ele seja a única opção. Teste usando o position relative e setando o left.

Mas evite de usar o elemento center, por ser um pouco antigo, sendo que há soluções em css.

jeab · 14 de julho de 2016

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Posicionar um objeto na tela</title>
<style type="text/css">
	#imgpos {
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-110px;
		margin-top:-40px;
		}
</style>
</head>
<body>
<img src="logo.gif" width="220" height="80" 
alt="logo de 220 por 80 pixel" id="imgpos">
</body>
</html>