[分享]css中怎么使文字上下排列

CSS是一门让我们能够让网页变得更加美观的技术，可以掌握CSS的开发者可以更好的设计出符合需求的网页并提升用户的浏览体验。其中文字排版是页面排版中重要的一部分，那么在CSS中，怎样实现让文字上下排列呢...

CSS是一门让我们能够让网页变得更加美观的技术，可以掌握CSS的开发者可以更好的设计出符合需求的网页并提升用户的浏览体验。其中文字排版是页面排版中重要的一部分，那么在CSS中，怎样实现让文字上下排列呢？
在CSS中，有两种让文字上下排列的方法，一种是通过line-height属性，另一种是通过vertical-align属性。下面我们将分别详细介绍这两种方法。
1. line-height属性
line-height属性主要用来设置行高，该属性的值可以为一个数字、一个百分比或者一个规定的长度。当行高比字体大小大的时候，文字就可以垂直居中。比如以下的代码：

p{
   font-size: 20px;
   line-height: 30px; 
} 

上述代码中，我们设定了一个段落的字体大小为20px，行高为30px，这样就可以实现文字垂直居中排列。
2. vertical-align属性
vertical-align属性主要用来定义一个元素在垂直方向上对齐的方式。该属性可以在inline元素和table-cell元素上生效。vertical-align属性可以取值：top、middle、bottom，baseline，text-top，text-bottom，默认值为baseline。比如以下的代码：

p{
   display: inline-block;
   vertical-align: middle; 
} 

上述代码中，我们将段落的display属性设置为inline-block，把vertical-align属性设置为middle，就可以使文字垂直居中排列。
不管是使用line-height属性还是vertical-align属性，都可以实现文字上下排列，但是需要注意的是，vertical-align属性只能用于inline-block元素和table-cell元素，与此不同，line-height属性可以用于所有元素。另外，在设置行高时应当注意适当的调整行高的大小和字体大小的比例，才能更好的实现文字垂直居中排列。