如何在ionic中的圖像頭像旁邊垂直對齊文本？

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可以自定義每個單元格的寬度，以實現所需的格式。

如何在ionic中的圖像頭像旁邊垂直對齊文本？

問題描述

1 個解決方案

解決方案1
0 2017-11-20 11:26:56

如何在ionic中的圖像頭像旁邊垂直對齊文本？

問題描述

1 個解決方案

解決方案1 0 2017-11-20 11:26:56

解決方案1
0 2017-11-20 11:26:56