CODEWITHSUNDEEP
htmlcss
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Vertically Aligned Text in a Span

Here is My Demo

<span class="boxPrice  ">
    <p>Previous Bill</p>

</span>

I want to create <p> inside a <span>

should be vertically aligned center inside the <span>

Upvotes: 1

Views: 95

Answers (5)

user2804021
user2804021

Reputation: 161

.boxPrice
  {
 width:160px; height:75px; border:1px #333 solid; text-align:center; display:inline-block;}           
.boxPrice p{padding:20px !important; margin:0 !important}
.boxPrice:after{ display:inline-block; content:'';vertical-align:middle;  height:100%}

Upvotes: 0

jackJoe
jackJoe

Reputation: 11148

Block elements aren't "affected" by the vertical-align: middle, only inline elements...

I suggest changing the p to inline and adding the vertical-align: middle, like this:

.boxPrice p {
    padding:0 !important;
    margin:0 !important;
    display: inline;
    vertical-align:middle;
}

Fiddle

Upvotes: 1

Zeno Popovici
Zeno Popovici

Reputation: 589

  1. I would rather not use a block level element ("p") element within an inline level element ("span"). Use div instead.

  2. There are several tricks on how to do this, the simplest is to modify line-height to match the height of your container:

.container {
     width: 100px;
     height: 100px;
     line-height: 100px; /* Set it to the container height */
}

You can also use "display: table-cell" to achieve the same effect:

 .container {
     display: table-cell;
     vertical-align: middle;
 }

Upvotes: 1

Nathan Q
Nathan Q

Reputation: 1902

You can add 

display:inline-block;

to your p element.

Upvotes: 4

SaturnsEye
SaturnsEye

Reputation: 6499

Add line-height:75px; You need to make sure the line height is the same as the div height/

http://jsfiddle.net/H4yuE/1/

Upvotes: 2

Related Questions