將文字對齊圖片中心的水平位置
今天課堂作業上有一段是要做出文字與圖片在一行且文字對齊圖片的中心位置。課上用inline-block做的，但盒子總是不受控制。于是回來隨便找了個圖片用vertical-align做成功了。
這是原本的樣式（加了邊框方便看盒子）如圖：
然后用垂直對齊，加大了字體，去掉了里面的盒子框框。如圖：
<style>.box1{border:2px black solid;}img{width:50px;height:50px;}span{width:100px;height:50px;vertical-align: 15px;font-size: 30px;}
</style>
<body><div class="box1"><img src="../images/images1/p2.png" alt="p2"/><span>傳智播客</span></div>
</body>
思路：img和span都是inline元素，用block元素將這兩個盒子裝起來，然后設置span垂直對齊即可。
![P7222 [RC-04] 信息學競賽](http://pic.xiahunao.cn/P7222 [RC-04] 信息學競賽)
