如何在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

首先，对于跨浏览器定位位置相对位于中心的图像，您应该添加：

{{ object.score }} 

其次，columns类应该有一个媒体查询类，以使它的位置相对，并且它的display属性是块而不是table-cell。

<center>your image</center>

编辑：

抱歉，我误解了你的问题。 所以主要是你想要信息图标就在它现在的位置，但是以当前div的中间为中心：

<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>

Answer 2

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

仅更改保证金

Answer 3

使列div显示为表格单元格并设置垂直对齐中间

.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{
	margin-top:0px auto;
}
  .five{ text-align:center}
</style>

试试吧