如何在HTML段落中垂直對齊范圍和文本？

Question

我想使用引導程序創建一個可單擊的圓角矩形，該矩形將在單擊時更改顏色。 我發現做到這一點的最佳方法是跨度。

這是我編寫的示例代碼：

<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> 

自舉

Answer 2

嘗試給出vertical-align: middle; 和line-height等於<span>的height ：

 <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

\n

\n

\n

    <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>

\n

\n

\n

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