Ionic framework 框架的重叠

我是在离子框架下开发的新手。我使用网格布局创建了一个带有图像按钮的页面。但两者相互重叠

这是我的代码：

  <center>
  <br>
  <div class="row">
  <div class="col ">
  <a class="button button-clear" href="#/app/deals">
  <img src="img/bagnew.jpg" width="70%">
  </a>
  </div>
 <div class="col">
<a class="button button-clear" href="#/app/search">
<img src="img/search.jpg" width="70%">
</a>
</div>
</div>
</center>
<center>
<div class="row">
<div class="col ">
<a class="button button-clear" href="#/app/favourites">
<img src="img/star.jpg" width="80%" >
</a>
</div>
<div class="col">
<a class="button button-clear" href="#/app/news">
<img src="img/paper.jpg" width="70%" >
</a>
</div>
</div> 
</center>

星形和纸质图像按钮与新建和搜索图像按钮的一半重叠

---

请帮忙。感谢您

爱奥尼亚在加载图像时有内置的css类可供使用，您可以尝试将类

项目图像

添加到渲染图像的

div

。修改代码

包括双柱网和双柱网的

col-50

项图像

在列中渲染图像

已删除为

img

标签指定的

width

整个代码更改如下：

<div class="row">
 <div class="col col-50 item-image ">
  <a class="button button-clear" href="#/app/deals">
   <img src="img/bagnew.jpg">
  </a>
 </div>
 <div class="col col-50 item-image">
  <a class="button button-clear" href="#/app/search">
   <img src="img/search.jpg">
  </a>
 </div>
</div>
<div class="row">
   <div class="col col-50 item-image ">
    <a class="button button-clear" href="#/app/favourites">
     <img src="img/star.jpg">
    </a>
   </div>
   <div class="col col-50 item-image">
    <a class="button button-clear" href="#/app/news">
      <img src="img/paper.jpg">
    </a>
  </div>
</div> 

---

我发现爱奥尼亚框架中的克莱拉按钮有固定高度。因此，它们一直在造成重叠。一旦我将css文件中的最大高度更改为“无”，图像就会正确对齐。谢谢：）