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>
You can add
display:inline-block;
to your p element.
Add line-height:75px;
You need to make sure the line height is the same as the div height/
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;
}
I would rather not use a block level element ("p") element within an inline level element ("span"). Use div instead.
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;
}
.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%}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.