CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
aarelovich
aarelovich

Reputation: 5586

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

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:

enter image description here

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?

Upvotes: 0

Views: 64

Answers (4)

Polyducks
Polyducks

Reputation: 213

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

Upvotes: 0

Blix
Blix

Reputation: 289

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

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

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>

Upvotes: 0

m4n0
m4n0

Reputation: 32355

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

Upvotes: 1

Related Questions