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

Question

我想创建一个可点击的圆角矩形，使用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>

这就是它所显示的：

我想要的是将文字对齐到红色正方形的中间而不是红色正方形的底部。

此代码：

<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

Answer 2

尝试将vertical-align: middle;和line-height等同于height <span>：

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

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

有点不清楚你在这里问的是什么，所以我会回答这两种解释。

a）您希望文本位于正方形的中间（包含在其中）

这是一个相对简单的变化。您只需要在范围内包含文本。

b）您希望文本垂直位于正方形的中间（仍在其外部）

为此，您需要查看文本对齐方式。

<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 style="vertical-align: 40%;">Lecciones Aprendidas</b>

在上面的例子中，我只是改变了<b>标签的样式。您可以通过更改百分比来改变它所在的位置。您可以使用多种不同的选项，这些选项列在mdn：

上

https://developer.mozilla.org/en/docs/Web/CSS/vertical-align