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>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
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>
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>
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;
}
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;
}
In my case margin auto works fine.
p {
font: 22px/24px Ubuntu;
margin:auto 0px;
}
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;
}
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!
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{_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background-color: blue;_x000D_
}_x000D_
_x000D_
.text-div{_x000D_
position: relative;_x000D_
top: 50%;_x000D_
transform: translateY(-50%);_x000D_
}_x000D_
_x000D_
p.event_desc{_x000D_
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;_x000D_
color: white;_x000D_
text-align: center;_x000D_
}<div class="parent-div">_x000D_
<div class="text-div">_x000D_
<p class="event_desc">_x000D_
MY TEXT_x000D_
</p>_x000D_
</div>_x000D_
</div>Source: Stackoverflow.com