How do I vertically align text in a paragraph

Question

I would like to know to align the text in a p element to be vertically centered  Here are my styles   x000D   x000D  p event desc        font  bold 12px  Helvetica Neue   Helvetica  Arial  sans-serif       line-height  14px       height  35px       margin  0px    x000D   lt p class  event desc  gt Lorem ipsum  lt  p gt  x000D   x000D   x000D

User · Accepted Answer

Try these styles   x000D   x000D  p event desc   x000D    font  bold 12px  Helvetica Neue   Helvetica  Arial  sans-serif  x000D    line-height  14px  x000D    height 75px  x000D    margin  0px  x000D    display  table-cell  x000D    vertical-align  middle  x000D    padding  10px  x000D    border  1px solid  f00  x000D    x000D   lt p class  event desc  gt lorem ipsum lt  p gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    lt div class  row align-items-center  gt        lt p class  col-sm-1 mb-0  gt                       lt  p gt   lt  div gt    Bootstrap by default assign a calculate margin bottom  so mb-0 disabled this   I hope it helps

User · Answer

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     x000D   x000D   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    x000D   lt div class  parent-div  gt  x000D     lt div class  text-div  gt  x000D      lt p class  event desc  gt  x000D      MY TEXT x000D      lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   x000D   x000D   paragraph          font-weight  light        color  gray        min-height  6rem        background  lightblue      x000D   lt h1 class  heading  gt  Nice to meet you   lt  h1 gt   lt p class  paragraph  gt  This is a paragraph  lt  p gt  x000D   x000D   x000D   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   x000D   x000D   myflexbox       min-height  6rem      display  flex      flex-direction  column      justify-content  center      background  lightblue      paragraph          font-weight  light        color  gray      x000D   lt h1 class  heading  gt  Nice to meet you   lt  h1 gt   lt div class  myflexbox  gt       lt p class  paragraph  gt  This is a paragraph  lt  p gt   lt  div gt  x000D   x000D   x000D   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   x000D   x000D   myflexparagraph       min-height  6rem      display  flex      flex-direction  column      justify-content  center      background  lightblue      paragraph          font-weight  light        color  gray      x000D   lt h1 class  heading  gt  Nice to meet you   lt  h1 gt   lt p class  paragraph myflexparagraph  gt  This is a paragraph  lt  p gt  x000D   x000D   x000D   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

User · Answer

In my case margin auto works fine  p       font  22px 24px Ubuntu      margin auto 0px

User · Answer

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        lt div style  height 35px   gt  lt p style  line-height 35px   gt text lt  p gt  lt  div gt

User · Answer

User vertical-align  middle  along with text-align  center property  lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt   center     border  3px solid green    text-align  center      center p     display  inline-block    vertical-align  middle     lt  style gt   lt  head gt   lt body gt    lt h2 gt Centering lt  h2 gt   lt p gt In this example  we use the line-height property with a value that is equal to the height property to center the div element  lt  p gt    lt div class  quot center quot  gt     lt p gt I am vertically and horizontally centered  lt  p gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

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

User · Answer

Below styles will vertically center it for you  p event desc    font  bold 12px  quot Helvetica Neue quot   Helvetica  Arial  sans-serif   line-height  14px   height  35px   display  table-cell   vertical-align  middle   margin  0px

[html] How do I vertically align text in a paragraph?

Examples related to html

Examples related to css