Как показать изображение в середине div?

Question

Я создал отзывчивое всплывающее окно, и мне нужно отобразить изображение в середине div, но когда я минимизирую ширину экрана, изображение прикрепляется к вершине div.

 <div class="row"> 
     <div class="five columns"> 
     <img class="imga" src="images/warning.png"> 
     </div> 
     <div class="seven columns"> 
     <p style="color:#e57a2a; font-size: 150%; text-align: center; line-height: 1.1;"><b> siamo spiacenti ma il servizio a domicilio non e al momento disponibile in questa zona </b></p> 
     <p style="color:#20540D; font-size: 120%; text-align: center; line-height: 1.1;"> ti invitiamo ad effettuare l'ordine per il ritiro in negozio presso i nostri ristoranti</p> 
     <center><button style="background-color:#e57a2a;color:white; border:none; height:35px;">ordina ora </button></center> 
     </div> 
    </div> 

.imga{ 
max-width:100%; 
position: relative; 
margin:auto;" 
} 

Answer 1

Во-первых, для позиционирования кросс-браузерных изображения с положением относительно в центре, вы должны добавить:

<center>your image</center> 

Второй , класс столбцов должен иметь класс медиа-запросов, чтобы он занимал свою позицию r elative и его свойство отображения - это блок, а не table-cell.

<div class="row"> 
    <div class="five columns"> 
    <center><img class="imga" src="images/warning.png"></center> 
    </div> 
    <div class="seven columns"> 
    <p style="color:#e57a2a; font-size: 150%; text-align: center; line-height: 1.1;"><b> siamo spiacenti ma il servizio a domicilio non e al momento disponibile in questa zona </b></p> 
    <p style="color:#20540D; font-size: 120%; text-align: center; line-height: 1.1;"> ti invitiamo ad effettuare l'ordine per il ritiro in negozio presso i nostri ristoranti</p> 
    <center><button style="background-color:#e57a2a;color:white; border:none; height:35px;">ordina ora </button></center> 
    </div> 
</div> 
<style> 
@media all and (max-width:768px){ 
.columns { 
display:block; 
position:relative; 
} 
} 
</style> 

Edit:

К сожалению, я не понял ваш вопрос. Так в основном вы хотите значок информации, чтобы быть там, где он сейчас, но с центром в середине своего текущего DIV:

<style> 
.columns { 
display:table-cell; 
vertical-align:middle; 
} 
.row { 
display:table; 
position:absolute; 
height:100%; 
} 
</style> 

Answer 2

.imga{ 
    max-width:100%; 
    position: relative; 
    margin:0 auto; 
} 

изменение только запас

Answer 3

сделать столбцы DIVS дисплей в качестве таблицы-ячейки и установить вертикальную Выровнять по середине

.columns{ 
    display:table-cell; 
    vertical-align: middle; 
} 

Answer 4

<div class="row"> 
 
     <div class="five columns"> 
 
     <img class="imga" src="images/warning.png"> 
 
     </div> 
 
     <div class="seven columns"> 
 
     <p style="color:#e57a2a; font-size: 150%; text-align: center; line-height: 1.1;"><b> siamo spiacenti ma il servizio a domicilio non e al momento disponibile in questa zona </b></p> 
 
     <p style="color:#20540D; font-size: 120%; text-align: center; line-height: 1.1;"> ti invitiamo ad effettuare l'ordine per il ritiro in negozio presso i nostri ristoranti</p> 
 
     <center><button style="background-color:#e57a2a;color:white; border:none; height:35px;">ordina ora </button></center> 
 
     </div> 
 
    </div> 
 

 

 

 
<style type="text/css"> 
 
.imga{ 
 
\t margin-top:0px auto; 
 
} 
 
    .five{ text-align:center} 
 
</style>

Попробуй