Выравнивание содержимого блока div

.div_foto {
    margin: 0 auto;
    float:left;
}

 .wrap{
            width: 300px; 
            margin: 0 auto;
        }
        
        .wrap img{
            float: left;
        }
        
        .wrap img:nth-of-type(even){
            float: right;
        }
        .row{
            overflow: hidden;
            margin-bottom: 20px;
        }

.main {
    text-align: center;
    background: linear-gradient(180deg, #fff, #e6e6e6);
    border: 2px solid #fff;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 15px;
    overflow: hidden;
}

.div_foto {
     text-align: center;
}

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 1000px;
    list-style: none;
    text-align: center;
}

.div_foto {
    
    padding: 0px 0px 0px 10px; 
 
    float:left;
}

.div_foto{width: 50%; float: left; text-align: center;}

.grid{
    width: 80%;  /*ширина общего контейнера. Если надо, чтобы он не резинил, ставишь в значение в пикселях*/
    margin:0 auto;
    text-align: center;
}
 
figure{
    display:inline-block;
    width:45%;  /*ширина каждого блока с картинкой, чтобы на каждую строку помещалось 2 картинки (45%+45%).*/              
    min-width:500px; /*минимальная ширина блока с картинкой, это чтобы при уменьшении окна браузера картинки не накладывались друг на друга, а схлопывались в одну колонку, но это снова для резиновости.*/ 
    margin:0;   
    text-align: center;
}
 
.effect-bubba img{
    max-width:500px; /*Максимальная ширина картинок*/     
    height: auto;
}