flex 样式的小问题

Question

<view class='shop'>
    <view class='pic'>
      <image src='../../image/abc.png'></image>
    </view>
    <view class='name'>
      <text>店名</text>
      <text class='time'>2017-12-12</text>
    </view>
</view>

样式

.shop {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  padding: 20rpx;
}

.name {
  font-size: 17px;
  display: flex;
  flex-direction: column;
}
.time{
  font-size: 12px;
  color:blue;
}
.pic image {
  width: 78rpx;
  height: 78rpx;
  padding-right: 20rpx;
}

在微信小程序中，渲染的结果是：

图片和游标的文字高低不对齐，请问需要怎么设置解决呢？直接给图片加padding-top吗？有没有其他方法？

Answer 1

.name {
    flex: 1;
    width: 0;
}

Answer 2

看上去像是vertical-align属性的问题，设置成bottom试试。

Answer 3

.shop{
    /*增加一个*/
    align-items:center;
}

Answer 4

/*增加*/
.pic { display: flex }

Answer 5

.shop{
    align-items:center
}

Answer 6

可以试一下
line-height: 1;