如何在离子图像头像旁边垂直对齐文本？答案

【问题标题】：How to vertically align text next to an image avatar in ionic?如何在离子图像头像旁边垂直对齐文本？
【发布时间】：2017-09-27 02:23:47
【问题描述】：

我正在尝试在项目列表中的头像旁边放置一个标签/名称。我正在使用 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 吗？

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

【问题讨论】：

标签： html css ionic-framework alignment

【解决方案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 自定义每个单元格的宽度，以实现您正在寻找的格式。

【讨论】：