Quando para centralizar a imagem com borda e sombreamento, mesmo inserindo o código corretamente ela permanece à esquerda. O que pode causar esse erro?
Quando para centralizar a imagem com borda e sombreamento, mesmo inserindo o código corretamente ela permanece à esquerda. O que pode causar esse erro?
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;
}
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