[分享]css3文字div垂直

CSS3是指层叠样式表（Cascading Style Sheets）的第三个版本，它提供了许多关于样式和布局的新属性，特别是在文字方面。其中一个重要的属性是用于垂直文本对齐的verticalalig...

CSS3是指层叠样式表（Cascading Style Sheets）的第三个版本，它提供了许多关于样式和布局的新属性，特别是在文字方面。其中一个重要的属性是用于垂直文本对齐的vertical-align属性。

div {
   height: 100px;
   line-height: 100px;
   text-align: center;
}

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

在上面的代码中，我们使用div元素来创建一个100像素高的区域，然后使用line-height属性来水平居中文本。然后我们使用span元素，将其设置为inline-block，并将其vertical-align属性设置为middle，以使其垂直居中显示。

需要注意的是，vertical-align属性只适用于行内元素和表格单元格。因此，我们使用display: inline-block将span元素设置为行内块级元素。

除了vertical-align属性外，CSS3还提供了其他一些有用的文字属性，例如文字阴影（text-shadow）、文字间距（letter-spacing）以及文字变形（text-transform）。这些属性可以帮助我们创建更具有吸引力和可读性的文本效果。