Question

我正在尝试在项目列表中的头像旁边放置标签/名称。我正在使用Ionic v1。

这是我的档案：

<!DOCTYPE html>
<html>

  <head>
    <link data-require="ionic@*" data-semver="1.3.1" rel="stylesheet" href="https://code.ionicframework.com/1.3.1/css/ionic.min.css" />
    <script data-require="ionic@*" data-semver="1.3.1" src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
    <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
<h1>Hello Plunker!</h1>

<div class="list">
  <div class="item item-avatar-left item-icon-right">
    <img src="venkman.jpg">
    <h2>Hello</h2>
    <i class="icon ion-ios-telephone"></i>
  </div>

  <div class="item item-icon-left item-icon-right">
    <i class="icon ion-star"></i>
    <h2>Hello</h2>
    <i class="icon ion-ios-telephone"></i>
  </div>

  <div class="item item-icon-left item-icon-right">
    <i class="icon ion-star"></i>
    <h2>Hello</h2>
    <p>hi</p>
    <i class="icon ion-ios-telephone"></i>
  </div>

  <div class="item item-avatar-left item-icon-right">
    <img style="height: 15px" src="venkman.jpg">
    <h2>Hello</h2>
    <p>hi</p>
    <i class="icon ion-ios-telephone"></i>
  </div>
</div>

我也在plunkr上得到了它：http://plnkr.co/edit/g3HI56XFZmZwxAGlUcBj?p=preview

如果我使用图标，则格式化效果很好，文本在图标旁边垂直对齐，但由于某些原因，当我使用头像时，文本始终位于垂直位置。

如何使用离子垂直对齐中间的东西？我应该使用flexbox吗？

我注意到，如果图像也是短图像，它也不会自动将图像对齐在中心。

Answer 1

我知道这是一个老帖子，但我来到这里寻找如何做类似的事情，所以也许它可以帮助将来的某个人。

一种简单的方法是使用表格：

<table style="width:100%">
 <tr>
    <td><img src="venkman.jpg"></td>
    <td><h2>Hello</h2></td>
    <td><i class="icon ion-ios-telephone"></i></td>
 </tr>
</table>

然后使用css，您可以自定义每个单元格的宽度，以实现您正在寻找的格式。

如何垂直对齐离子中图像头像旁边的文本？

1 个答案: