How do I vertically align text in a paragraph?
HtmlCssHtml Problem Overview
I would like to know to align the text in a p element to be vertically centered.
Here are my styles:
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height: 35px;
margin: 0px;
}
<p class="event_desc">Lorem ipsum.</p>
Html Solutions
Solution 1 - Html
Try these styles:
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height:75px;
margin: 0px;
display: table-cell;
vertical-align: middle;
padding: 10px;
border: 1px solid #f00;
}
<p class="event_desc">lorem ipsum</p>
Solution 2 - Html
You can use line-height for that. Just set it up to the exact height of your p tag.
p.event_desc {
line-height:35px;
}
Solution 3 - Html
If the answers that involve tables or setting line-height don't work for you, you can experiment with wrapping the p element in a div and style its positioning relative to the height of the parent div.
.parent-div{
width: 100px;
height: 100px;
background-color: blue;
}
.text-div{
position: relative;
top: 50%;
transform: translateY(-50%);
}
p.event_desc{
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
text-align: center;
}
<div class="parent-div">
<div class="text-div">
<p class="event_desc">
MY TEXT
</p>
</div>
</div>
Solution 4 - Html
So personally I'm not sure of the best-method way, but one thing I have found works well for vertical alignment is using Flex, as you can justify it's content!
Let's say you have the following HTML and CSS:
.paragraph {
font-weight: light;
color: gray;
min-height: 6rem;
background: lightblue;
}
<h1 class="heading"> Nice to meet you! </h1>
<p class="paragraph"> This is a paragraph </p>
We end up with a paragraph that isn't vertically centered, now if we use a Flex Column and apply the min height + BG to that we get the following:
.myflexbox {
min-height: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
background: lightblue;
}
.paragraph {
font-weight: light;
color: gray;
}
<h1 class="heading"> Nice to meet you! </h1>
<div class="myflexbox">
<p class="paragraph"> This is a paragraph </p>
</div>
However, in some situations you can't just wrap the P tag in a div so easily, well using Flexbox on the P tag is perfectly fine even if it's not the nicest practice.
.myflexparagraph {
min-height: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
background: lightblue;
}
.paragraph {
font-weight: light;
color: gray;
}
<h1 class="heading"> Nice to meet you! </h1>
<p class="paragraph myflexparagraph"> This is a paragraph </p>
I have no clue if this is good or bad but if this helps only one person somewhere that's still one more then naught!
Solution 5 - Html
If you use Bootstrap, try to assign margin-bottom 0 to the paragraph and after assign the property align-items-center to container, for example, like this:
<div class="row align-items-center">
<p class="col-sm-1 mb-0">
....
</p>
</div>
Bootstrap by default assign a calculate margin bottom, so mb-0 disabled this.
I hope it helps
Solution 6 - Html
you could use
line-height:35px;
You really shouldnt set a height on paragraph as its not good for accessibility (what happens if the user increase text size etc)
Instead use a Div with a hight and the p inside it with the correct line-height:
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
Solution 7 - Html
User vertical-align: middle; along with text-align: center property
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 3px solid green;
text-align: center;
}
.center p {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Solution 8 - Html
Alternative solution which scales for multi-line text:
Set vertical and horizontal padding to be (height - line-height) / 2
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
padding: 10.5px 0;
margin: 0px;
}
Solution 9 - Html
Below styles will vertically center it for you.
p.event_desc {
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height: 35px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
Solution 10 - Html
In my case margin auto works fine.
p {
font: 22px/24px Ubuntu;
margin:auto 0px;
}
Solution 11 - Html
Precisely, vertically align text in a paragraph.
HTML
<main>
<p><span>TEXT to be centered in P tag</span></p>
</main>
CSS
main {
height: 400px;
position: relative;
}
main>p {
min-height: 128px;
line-height: 128px;
font-size: 48px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
main>p>span {
position: absolute;
left: 0;
right: 0;
top: 64px;
transform: translateY(-68px);
-webkit-transform: translateY(-68px);
-moz-transform: translateY(-68px);
-ms-transform: translateY(-68px);
text-align: center;
}