鍍金池/ 問答/HTML/ flex 樣式的小問題

flex 樣式的小問題

<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;
}

在微信小程序中，渲染的結(jié)果是：
clipboard.png

圖片和游標(biāo)的文字高低不對齊，請問需要怎么設(shè)置解決呢？直接給圖片加padding-top嗎？有沒有其他方法？

回答
編輯回答
我以為

可以試一下
line-height: 1;

2017年2月23日 07:27
編輯回答
萌面人

看上去像是vertical-align屬性的問題，設(shè)置成bottom試試。

2018年4月30日 11:09
編輯回答
拼未來
/*增加*/
.pic { display: flex }
2018年2月19日 06:51
編輯回答
薄荷綠
.name {
    flex: 1;
    width: 0;
}
2018年4月6日 10:17
編輯回答
綰青絲
.shop{
    /*增加一個*/
    align-items:center;
}
2017年1月27日 23:23
編輯回答
伴謊
.shop{
    align-items:center
}
2018年3月10日 11:55