很多程序员敲代码写样式时，是否会遇到以下情况？
一行5个元素，然后要求一上一下排列；
一行10个元素，要求前7个元素垂直居中，第八，第九个元素分别一上一下，第十个元素垂直居中；
一张图片，一段文字，另一段文字，图片和第一段文字要垂直居中。
诸如此类...
总之一句话，就是极其不规律，我们如果用弹性盒去处理这些元素，得到的结果是全部垂直居中，或者全部换行。特异性的针对某一个，某几个元素设置样式，我们也可以通过定位，或者设置外边距，内边距实现。但是如果有大量元素呢？那肯定是有局限性的
今天，我们研究一个新属性，很少见，但是有时候，却可以解决大问题。
那就是 vertical-align属性，vertical-align属性用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
以下是这个属性的属性值
vertical-align: baseline; //使元素的基线与父元素的基线对齐。
vertical-align: sub; //使元素的基线与父元素的下标基线对齐。
vertical-align: super; //使元素的基线与父元素的上标基线对齐。
vertical-align: text-top; //使元素的顶部与父元素的字体顶部对齐。
vertical-align: text-bottom; //使元素的底部与父元素的字体底部对齐。
vertical-align: middle; //使元素的中部与父元素的基线加上父元素高的一半对齐。
vertical-align: top; //使元素的基线对齐到父元素的基线之上的给定长度，可以是负数。
vertical-align: bottom; //使元素的基线对齐到父元素的基线之上的给定百分比。
我个人习惯于用div，钟爱div，可以说用习惯了，用顺手了。那么只需要将div转化为行内元素，即可使用这个属性。
就拿以下代码为例我们进行说明：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box { margin-left: 20vw; margin-top: 20vh; } #box img { width: 18.75rem; height: 12.5rem; } #first{ text-decoration: underline; font-size: 1em; } #second{ color: red; margin-left: 100px; font-size: 2em; } p{ display: inline; } #box div{ display: inline; } </style> </head> <body> <div id="box"> <img src="https://ucc.alicdn.com/images/user-upload-01/324a6024d7904849aa3810761cf7123e.png" alt=""> <span id="first">我是猿猴</span> <span id="second">我是程序员</span> <p>baseline model</p> <div>加菲猫</div> </div> </body> </html>
运行效果如下：
我们会发现，文字是按照基线排列的，这是默认样式。但如果我们给“我是程序员”这个元素加上vertical-align: middle;表示使元素的中部与父元素的基线加上父元素高的一半对齐。效果如下：
我们发现了这个内容为“我是程序员”的span标签，的确是依照父元素基线下降了原来的一半。那么如果我们给图片同样设置这个属性，会有何变化？
除了刚刚我们设置过的，内容为“我是程序员”的span标签之外，所有元素都实现了垂直居中。
其他的属性值更是有不同的效果，也可以实现一上一下的排列。
自己尝试，多琢磨几遍，就能掌握了。
细想一下，这个属性在平时一般用不到，但是有时候解决某些问题，确实会有妙用。
