Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dificuldade em centralizar

Quando para centralizar a imagem com borda e sombreamento, mesmo inserindo o código corretamente ela permanece à esquerda. O que pode causar esse erro?

3 respostas
solução!

Nelson, pode mandar um exemplo do trecho de código CSS e HTML que está utilizando?

Antecipando uma solução, você pode colocar display block na imagem, e deixar as margens laterais automaticas, assim a imagem se centraliza

img {
    margin: auto;
    display: block;
}

https://codepen.io/soutomario/pen/YQGdpz

Você tem duas opções 1) Dentro do css definir


img{
    width: 500px;
    height: 200px;
    position: relative;
    left:20%;
}

A outra opção é antiga então não recomendo No HTML coloque as Tags

<center></center>

assim:

<center> <img src="local_Imagem"/></center>

Quando se trata de CSS á varias formas de se conseguir centralizar uma imagem ou texto, vou deixar algumas opções para você e verifique qual se adeque melhor a sua estrutura de HTML

forma 1 para centralizar texto:

div.container {
      height: 10em;
      position: relative
 }
div.container p {
       margin: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       margin-right: -50%;
       transform: translate(-50%, -50%)
 }

forma 2 centralizar texto:

div.container {
     height: 10em;
     display: flex;
     align-items: center;
     justify-content: center
 }
div.container p {
     margin: 0
 }

forma 3 para imagm centralizada vertical e horizontalmente :

div.container {
      height: 10em;
      position: relative;
    border:1px solid #000;
    box-shadow: 10px 10px 5px 0px #F00;
 }
   div.container img{
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
 }

é claro que um text-aling:center pode resolver o seu problema kkk