How to vertically align a span and text in an HTML paragraph?

Question

I want to create a clickable rounded rectangle that will change color when clicked, using bootstrap. The best way I found to do this is with a span.

Here is the example code I've written:

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

This is what it shows:

What I want is the text to be align to the middle of the red square instead of the bottom of the red square.

This code:

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

Shows the exact same thing (basically p ignores everything I write into style)

Can anyone provide me with a way to fix this? Or an alternative?

Answer 1

Set line-height for the div and then vertical-align the span within.

 <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

Try giving the vertical-align: middle; and line-height equal to the height to the <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

\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

It was somewhat unclear what you were asking here, so I'll answer both interpretations.

a) You want the text in the middle of the square (contained within)

This is a relatively simple change. You just need to contain the text within the span.

b) You want the text to be vertically in the middle of the square (still outside of it)

For this, you'll want to look at text alignment.

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

In the example above I've literally only changed the style for the <b> tag. You can alter where it lies by changing the percentage. There are a variety of different options available to you, which are listed on mdn:

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