-2

Fala pessoal, beleza?

Gostaria de saber existe alguma forma de centralizar uma imagem dependente de um uma outra div (que seria de texto).

Por exemplo: eu vou criar uma div e colocar uma imagem (icon) do lado esquerdo e um texto do lado direto.

O meu intuito é de colocar mais texto dentro dessa div, porém sempre que eu coloco mais texto ou tiro, tenho que centralizar a imagem de acordo com o texto "Manualmente" alterando o margin-top para que fique visualmente bonito! Queria saber como "centralizar" a imagem verticalmente na dentro da div.

.tabel{width: 100%;height: 90%;}
#espeesquertop {width: 60%;height:80%;margin-top: 5%;display:display: inline-block;}
#espeesquertop img{width:15%;margin-top: 25%;margin-left: 3%;display:}
#cont1 {float:right;width:70%;margin-right:5%;}
#cont1 p{font-size: 1em;line-height: 170%;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
#cont1 h2{margin-left:5%;}
    <div class="especi">
        <div class="tabel">
            <h2>Bem vindos ao Egito</h2>
            <div id="espeesquertop">
                    <img src="https://image.flaticon.com/icons/svg/3113/3113259.svg" alt="">
                    <div id="cont1">
                        <h2>Egito 1</h2><br><p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>



        </div>
    </div><br><br>

0

2 Respostas 2

1

Para alinhar uma imagem no centro, primeiramente você deve definir a altura e largura dela, utilizando os atributos WIDTH E HEIGHT

Depois de definir a altura e largura, é importante você definir a posição dela, através do seguinte atributo: position:absolute

Você deverá definir uma margin-top e margin-left negativas com a metade do valor da altura e largura, por exemplo: Se minha imagem tem 200px de altura e 200px de largura, defino margin-top:-100px; margin-left:-100px;

Depois disso você defini top:50% left:50%

Aqui é a resposta completa:

#centralizar{
    width:200px;
    height:200px;
    position:absolute;
    margin-top:-100px;
    margin-left:-100px;
    top:50%;
    left:50%;
}

Existe outros meio de centralizar as imagens:

  left: 50%;
  position: absolute;
  transform: translateX(-50%);

Caso se faça necessário centralizar dentro de um div:

div img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
0

Está um pouquinho bagunçado!! É só usar display flex na div container dos itens, e em cada elemento, coloque uma div para cada e coloque um flex-basis com a porcentagem para cada elemento. Nesse caso eu coloquei somente o display flex na div pai e a imagem já centralizou, aí é só distanciar o texto ou com o flex-basis ou com o margin-left.

.tabel{width: 100%;height: 90%;}
#espeesquertop {
width: 60%;height:80%;margin-top: 5%;
display: flex;}
#espeesquertop img{width:15%;margin-top: 25%;margin-left: 3%;}
#cont1 {float:right;width:70%;margin-right:5%;}
#cont1 p{font-size: 1em;line-height: 170%;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
#cont1 h2{margin-left:10%;}
<div class="especi">
        <div class="tabel">
            <h2>Bem vindos ao Egito</h2>
            <div id="espeesquertop">
                    <img src="https://image.flaticon.com/icons/svg/3113/3113259.svg" alt="">
                    <div id="cont1">
                        <h2>Egito 1</h2><br><p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>



        </div>
    </div><br><br>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .