1

Tenho uma imagem para o logo, quero que ela fique sempre posicionada no centro da tela para todos os dispositivos.

Estou usando o .

CSS

.relative{
    position: relative;
    left: 40px;
}

HTML

<div class="relative">
    <img src="~/Content/images/Checkmark.fw.png" alt="logo" class="img-circle">
</div>

Agradeço

0

5 Respostas 5

3

Se caso deseja que sempre que a classe .relative fique posicionada no centro, poderia utilizar o código abaixo::

CSS

.relative {
 margin:0 auto;
 float:none;
}
1
  • Essa resposta resolve sua dúvida sobre posicionamento da sua imagem?
    – David
    8/02/2016 às 18:02
2

Tem as classes auxiliares do bootstrap que fazem isto, neste caso a center-block.

Bootstrap css imagens

Para centralizar imagens que usam a classe .img-responsive, use .center-block, em vez de .text-center. Consulte a seção classes auxiliares para mais detalhes sobre o uso .center-block.

O center-block não seria nada mais que:

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
1
  • Muito interessante, eu desconhecia esse class. Sempre usei o text-center, mesmo sabendo que não era ideal. Obrigado
    – GIA
    5/07/2017 às 14:24
1

se você deseja que um objeto fique sempre no centro da tela, independente dos demais elementos, então você deve usar position: fixed, ancorar ela nas extremidades da tela, usar um tamanho fixo e margem: auto:

.centro {
  background-image: url('http://cdn.flaticon.com/png/256/42608.png');
  box-shadow: 0px 0px 10px black;
  border-radius: 50%;
  background-color: whitesmoke;
  
  width: 256px;
  height: 256px;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}
<div class="centro"></div>

se forma alterativa ao margin: auto, você pode usar um transform: traslate(-50%, -50%)para deslocar o elemento.

.centro {
  background-image: url('http://cdn.flaticon.com/png/256/42608.png');
  box-shadow: 0px 0px 10px black;
  border-radius: 50%;
  background-color: whitesmoke;
  
  width: 256px;
  height: 256px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
<div class="centro"></div>

0

Uma outra opção seria:

.relative{ 
    display: table;
    margin: 0 auto;
}
-1

Cara, você precisa definir o tamanho dela primeiramente. Definindo o tamanho, você pode aplicar o margin: auto; que ela ficará centralizada.

.relative {
    width: 20%;
    margin: auto;
}

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 .