在离子项离子中心添加图像

Question

<div class="card">
  <div class="item item-thumbnail-left  thumb-centre thumb-right">

  <img src="img/carryout-icon.jpg"></img>
  <img src="img/or.jpg"></img>
  <img src="img/delivery-icon.jpg"></img>

  </div> 
</div>

CSS：

.item.thumb-right img{
  position: absolute !important;
  top: 10px !important;
  right: 20px !important;
  margin-right: 20px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

如何更新此图片以使图像位于中心

.item.thumb-centre img{
  position: center !important;
  top: 10px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

演示：

http://play.ionic.io/app/91deb2272019

编辑：中心图像的垂直对齐问题 这就是它在控制台中的样子。

Answer 1

你走了：http://play.ionic.io/app/23c0460f51dc
要左右对齐任何元素，只需要float属性，并将其值设置为左或右。对于集中化，您只需要margin: 0 auto加上父{div} text-align:center。 你的课程就像这样 的 CSS：

    .images-parent{
      text-align: center;
    }

    .left-image{
      float:left;
      max-width: 80px !important;
      max-height: 80px !important;
    }

    .center-image{
      margin:0 auto;
      max-width: 80px !important;
      max-height: 80px !important;
    }

    .right-image{
      float:right;
      max-width: 80px !important;
      max-height: 80px !important;  
    }

简单地将它们分配给项目和图像标签 的 HTML：

 <div class="item images-parent">
  <img src="img/carryout-icon.jpg" class="left-image"></img>
  <img src="img/or.jpg" class="center-image"></img>
  <img src="img/delivery-icon.jpg" class="right-image"></img>
  </div>

Answer 2

你的Css不合适。使用 margin：0 auto; 使图像居中 没有像 position：center

这样的css属性

你看起来像这样吗

main

Answer 3

将img标记放在p标记内。

<p style="text-align: center">
    <img src=....>
</p>

我希望这对你有用。