css图标与文字同一列对齐与同一行对齐

1. 同一列对齐：flex-direction:column;

html：

<view class="vol-meta-title">
      <text style="font-size: 17px;">{{desc.name}}简介</text>
      <view class="info" bindtap="click">
				<navigator style="display:flex;flex-direction:column;justify-content: center" url="../">
            <image src="cloud://h7/images/CampusMap/地图.png"></image>
        </navigator><span style="font-size:12px;">地图</span>
      </view>
    </view>

css：

.info{
	position:relative;
	transform: translate3d(-65px, -1px, 0);
	box-sizing: border-box;
  float: right;
}，

.vol-meta-title {
  margin-top: 5px;
  text-align: center;
  padding: 10rpx 5rpx;
  font-size: 0;
  color: #000;
  font-family: 'KaiTi';
}

效果图：

注意：font-size:0可以清除图标与文字(地图与图标之间的)间距，因为学院简介文字大小会占用间距，解决方法是单独在text设置字体大小，然后总的标题部分设置font-size=0。
ps：绝对定位参照物是它的父类，相对定位是相对它自身原来的位置。

2. 同一行对齐则删掉flex-direction:column;再加上align-items: center;而且要在文本的父元素内嵌套一层，不能在外面单独一层，不然分辨率不同将会有所偏移

<view class="content">
          <text class="vol-font">{{item.detail}}</text>
       <view class="info" bindtap="click">
				<navigator class="nav" url="../myClockInPlay/myClockInPlay">
            <image src="cloud://h7/images/CampusMap/地图.png"></image><span class="map">地图</span>
        </navigator>
      </view>
      </view>