Como centralizar uma IMG na horizontal no interior de DIV cont�iner?

04/06/2018

Boa noite.

Estou montando um layout de 3 colunas, no qual as colunas esquerda e direita devem ter larguras fixas de 300px e a coluna central se ajustar no que sobra. Quanto ao layout est� tudo OK, exatamente como preciso. Por�m, no interior da DIV central, coloquei uma IMG, a qual quero que sempre ocupe 100% da altura dessa DIV e que ela fique centralizada no horizontal, n�o importando se a largura da DIV na qual esta IMG est� contida tenha largura maior ou menor do que a largura da pr�pria IMG. Quanto a ocupar 100% da altura est� OK, n�o importa o como eu redimensione a janela do browser ela est� se auto-ajustando como desejado. Por�m, ela n�o est� ficando centralizada na horizontal, como � o objetivo. Ela est� ficando sempre alinhada � esquerda, exceto quando a largura da DIV � maior que a largura da IMG, a� neste caso sim a IMG est� ficando perfeitamente centralizada da DIV cont�iner, como � o objetivo. Agora, quando a largura da DIV � menor do que a largura da IMG, a IMG est� ficando alinhada � esquerda, cortando partes da imagem somente no seu lado direito.

Estou fazendo os testes em um desktop com resolu��o de 1920x1080 e a imagem que estou usando na IMG tem 1680x945px.
Seguem os c�digos HTML e CSS:

<!doctype html>
<html lang="pt-br">
<head>
	<link type="text/css" rel="stylesheet" href="code/css/estudo.css">
</head>

<body>
	<div id="main">
		<div id="viewport_left" class="viewports">
		</div>
		<div id="viewport_center" class="viewports">
			<img id="imagem_teste" src="imagem_teste_01.jpg">
		</div>
		<div id="viewport_right">
		</div>
	</div>
	<div id="footer">
	</div>
</body>
</html>

* {
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
}
#main {
	width: 100%;
	margin: 0;
}
#viewport_left {
	min-height: calc(100vh - 25px);
	margin-bottom: 25px;
	width: 324px;
	background-color: #333333;
	position: fixed;
	left: 0;
	top: 0;
}
#viewport_center {
	min-height: calc(100vh - 25px);
	width: calc(100vw - 650px);
	margin-bottom: 25px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	background-color: red;
	position: absolute;
	left: 50%;
	top: 50%;
        margin-left: calc(((100vw - 648px) / 2)* -1);
        margin-top: calc((100vh / 2)* -1);
	display: table;
	overflow: hidden;
}
#imagem_teste {
	max-height: calc(100vh - 25px);
	position: absolute;
	width: auto;
	height: auto;
}
#viewport_right {
	min-height: calc(100vh - 25px);
	margin-bottom: 25px;
	width: 324px;
	background-color: #333333;
	position: fixed;
	right: 0;
	top: 0;
}
#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 24px;
	width: 100%;
	background-color: #333333;
	border-top: 1px solid #FFFFFF;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

Algu�m sabe como posso corrigir este problema?
Desde j� agrade�o a toda e qualquer ajuda e colabora��o.

Grato, Evair Peterson.

Evair Peterson

Curtir t�pico + 0

Responder

Post mais votado

07/06/2018

No teu CSS, nas defini��es da imagem, troca o tipo de position: absolute

#imagem_teste {
    max-height: calc(100vh - 25px);
    position: absolute;
    width: auto;
    height: auto;
}

Para position: relative

#imagem_teste {
    max-height: calc(100vh - 25px);
    position: relative;
    width: auto;
    height: auto;
}

era isso que voc� queria?

Espero ter ajudado. :D

Alex William

Responder

Gostei + 1

Mais Posts

07/06/2018

Evair Peterson

Boa noite Alekym.

Agrade�o sua prontid�o em ajudar, mas infelizmente o resultado � o mesmo, tanto com o position em absolute, como em relative.

Agrade�o de qualquer forma!
TKS :-D

Responder

Gostei + 0

09/07/2018

Aparecida Gon�alves

Ol� Evair,
tudo bem?
Eu tentei montar uma estrutura baseado no seu problema. Segue o c�digo:

<!-- Bootstrap versao 3.3 12 Colunas -->
<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<title>Colunas Bootstrap</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<style>
	.container p{
	text-align:center;
	color: white;
	}
	.esquerda{
	background-color: blue;
	height:300px;
	}
	.meio{
	background-color: #cccccc;
	height:300px;
	}
	.meio img{
	display: block;
	width: 100%;
	max-width: 240px; /* largura da sua imagem original */
    margin-left: auto;
    margin-right: auto;
	vertical-align: middle;
	}
	.direita{
	background-color: brown;
	height:300px;
	}
	</style>
<body>
    <div class="container">
		<div class="esquerda col-xs-12 col-md-3">
		<p>Conte�do A - Lado Esquerdo</p>
		</div>
		<div class="meio col-xs-12 col-md-6">
		<p>Conte�do B - Meio </p>
		<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> <!-- Obs. imagem original tem 240 x 88 px -->
		</div>
		<div class="direita col-xs-12 col-md-3">
		<p>Conte�do C - Lado Direito</p>
		</div>
	</div>
</body>
</html>

Um ponto importante que eu acho que vale a pena voc� se atentar, � a real necessidade de ter colunas laterais com os 300pixel fixos... porque sendo fixos, voc� ter� problema quando esse mesmo conte�do for aberto em tablets e em celulares (tanto horizontal quanto vertical).
Como geralmente n�o sabemos quais os dispositivos que os usu�rios ir�o usar, acho que seria vi�vel adotar o Bootstrap e trabalhar com as porcentagens das Colunas, no lugar de fixar pixels.
Espero ter ajudado!
Cida Luna.

Responder

Gostei + 0