探求单行不同字号文字垂直居中的解决方法(一)

于 2008-10-16 15:46:25 发布 · 172 阅读

文章标签：

#css 文字垂直居中

好好学习天天向上专栏收录该内容

52 篇文章

订阅专栏

本文探讨了在网页表单中实现验证码的样式调整问题，特别是如何使带有不同字号的文字元素在同一行中垂直居中对齐。作者尝试了多种CSS布局方案，并讨论了各自的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<label><SPAN class=star>*</SPAN>验证码</label>

在写这段时遇到了困惑，“*”和“验证码”字号不一致，但要单行垂直居中，试了很多写法，没找到最简洁合适的。

只好把span的属性定义成block，即

label {
       float:left;
       width:120px;
       text-align:left;
       margin:0 9px 0 0;
       line-height:20px;
       height:20px;
       font-size:12px;
       font-weight:bold;
}


label span.star { 
       color:red; 
       margin-right:4px;
       margin-top:3px; 
       width:10px;
       display:block;
       float:left;
       font-size:18px;
 }

但是这种写法有局限就是lable不能定义成文字居右的显示方式，还存在不解，需寻求更好的写法。