html - 如何垂直对齐 HTML 段落中的跨度和文本？

Question

我想创建一个可点击的圆 Angular 矩形，点击时会改变颜色，使用 Bootstrap 。我发现执行此操作的最佳方法是使用跨度。

这是我编写的示例代码:

<p id="proyect_c_leasons" style="height:30px;vertical-align:middle;display:table-cell"> <span class="label label-default" style="background-color:#D80909;width:35px;height:25px;display:inline-block" onclick='console.log("hola")'>  </span> <b>Lecciones Aprendidas</b> </p>

这是它显示的内容:

我想要的是文本对齐到红色方 block 的中间而不是红色方 block 的底部。

这段代码:

<p id="proyect_c_leasons"> <span class="label label-default" style="background-color:#D80909;width:35px;height:25px;display:inline-block" onclick='console.log("hola")'>  </span> <b>Lecciones Aprendidas</b> </p>

显示完全相同的东西(基本上 p 忽略了我写入样式的所有内容)

谁能给我提供解决这个问题的方法？或者替代方案？

Answer 1

设置 div 的行高，然后垂直对齐其中的跨度。

<p id="proyect_c_leasons" style="height:30px;line-height:30px;display:table-cell"> 
  <span class="label label-default" style="background-color:#D80909;width:35px;height:30px;display:inline-block;vertical-align:middle;" onclick='console.log("hola")'>  
  </span>  
  <b>Lecciones Aprendidas</b> 
</p>

Bootply