微信小程序-文本与图片无法对齐

最近项目开发小程序，于是打算重新做一遍七月老师的小程序入门项目，熟悉一下，但是做到阅读页面时却突然遇到了一个问题：文本与图片怎么都无法对齐，真的是对着代码研究了一个多小时才突然想到了原因，想想也许有人会遇到同样的坑呢？于是有了这篇博客。（要不，直接看总结？）

遇到问题

想下图那样文本莫名其妙的跑到了图片的下面。

    <view class="avatar-date">
      <image class="avatar"
             src="/images/avatar/1.png"></image>
      <text class="date">
      Sep 20 2016
      </text>
    </view>

分析问题

最开始遇到这个问题的时候，我有两种猜想，可能误设置了里面的样式，让图片或者文本变成了块级元素，或者是因为我在页面的根元素（严格来说是第二个元素，根元素严格是page）设置了flex布局且设置了 flex-direction:column; 导致的。
第一个猜想很容易通过在控制台的wxml中查看样式推翻了，样式很正常，至少没有因为类名重复之类的问题多出一些我意料外的样式。
第二个猜想也很容易就推翻了，毕竟我一开始其实也觉得不是这个原因，直接将flex布局都去掉，文本和图片仍然无法对齐，果然想错了。坑。
很自然的，我想是不是微信这个开发工具抽风了，于是怒把开发者工具重启。可能是以前当过网优，遇到无法排查的问题就尝试重启，囧。不过话又说回来，重启确实是一个方法，毕竟这工具偶尔就会出现一些异常，导致页面无法正常显示。只是这次显然是我怪错它了。不过想想也没必要道歉了，毕竟虐我千百遍。。
还能是什么原因呢？它都不是对不齐的问题了，直接就是换行了。我又尝试设置了行高，不行。
想想，这也没什么大不了的，为了样式，我设置了margin-top，强行让文本移到了我希望的位置，问题解决。。。
但是！！！我想想我重做这个项目目的也不是为了应付一下啊，是希望打好基础，踏踏实实的取得进步，用这种方法，怎么看都是胜之不武，而且也只是让别人笑话而已。
于是，我一遍一遍的检查代码，样式，看了一遍又一遍。。。一个小时后，我突然想起好像以前看七月老师视频时提到了 text 组件可以使用\n来换行，会不会是因为我代码中 text 组件里的文本有空格换行等原因导致的？？？
对的，就是因为我在text组件中换行了，然后这个换行符也会在页面中换行！！！将text组件中的空隙全部去掉后，文本和图片终于对齐了。

检讨

想想本来好像就不应该在span啊等行内元素内随意换行添加空隙的，这种坏习惯一直没有引起自己的注意，这才在微信的这个text组件里吃到了苦头，估计以后再也不会犯类似的错误了。

总结

还是总结一下我知道的可能导致微信小程序-文本与图片无法对齐的情况吧：

• 如果文本与图片没有对齐，可以尝试设置给图片与文本都设置vertical-align: middle;
• 在控制台里看看是不是由于类名重复等原因设置了意料外的样式，例如设了block啊等等
• 赶紧重启一下微信开发者工具吧，这坑货又坑人了
• text组件内如果进行了换行，那么这个换行的效果是会反馈到网页中的，你的text组件里有空隙吗？
• 还是不行？要不重启一下电脑？