html字体左右水平居中,css的一个多行文字水平居中的问题

div里面有个font-size:10em;的属性,不知用意是什么?

偏下如此严重大致就是因为他所造成的。你可以尝试修改这个值,值越大,偏下越多。

稍微说下原因，vertical-align:middle这一属性对inline和inline-block元素的居中对齐并非文字中线

字体渲染都是按照英文标准渲染，你是否记得曾经的英语作业本那种四线三格。

vertical-align:middle的居中是按照四线三格的第三根线对齐的

稍微改了一下相应的代码,用height撑开div的高度,取消了font-size,单位用的px你看看

Document

.align_box_2{display:table-cell; width:550px; height:110px; padding:0 10px; border:4px solid #beceeb; color:#069; vertical-align:middle;}

.align_box_2 span.align_word{display:inline-block;font-size: 12px; vertical-align:middle;border: 1px solid red;}

这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。这里显示多行文字。