How do I vertically align text in a div

Question

I am trying to find the most effective way to align text with a div  I have tried a few things and none seem to work    x000D   x000D   testimonialText   x000D    position  absolute  x000D    left  15px  x000D    top  15px  x000D    width  150px  x000D    height  309px  x000D    vertical-align  middle  x000D    text-align  center  x000D    font-family  Georgia   Times New Roman   Times  serif  x000D    font-style  italic  x000D    padding  1em 0 1em 0  x000D    x000D   lt div class  testimonialText  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor x000D    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use    x000D   x000D  h1   x000D      margin  0  x000D      position  absolute  x000D      left  50   x000D      top  50   x000D      transform  translate -50   -50    x000D    x000D   container   x000D      height  200px  x000D      width  500px  x000D      position  relative  x000D      border  1px solid  eee  x000D    x000D   lt div class  container  gt  x000D       lt h1 gt Vertical align text lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    With this trick  you can align anything if you don t want to make it center add  left 0  to align left

User · Answer

Try to embed a table element    x000D   x000D   lt div gt  x000D     lt table style  width 200px  height 100px   gt  x000D       lt td style  vertical-align middle   gt  x000D        copenhagen x000D       lt  td gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need to add the line-height attribute and that attribute must match the height of the div  In your case    x000D   x000D   center   x000D    height  309px  x000D    line-height  309px     same as height     x000D    x000D   lt div class  center  gt  x000D    A single line  x000D   lt  div gt  x000D   x000D   x000D    In fact  you could probably remove the height attribute altogether   This only works for one line of text though  so be careful

User · Answer

This works fine   HTML   lt div class  information  gt       lt span gt Some text lt  span gt       lt mat-icon gt info outline lt  mat-icon gt   lt  div gt    Sass   information       display  inline-block      padding  4px 0      span           display  inline-block          vertical-align  middle            mat-icon           vertical-align  middle            Without and with the image tag  lt mat-icon gt   which is a font

User · Answer

It is easy with display  flex  With the following method  the text in the div will be centered vertically    x000D   x000D  div   x000D    display  -webkit-flex  x000D    display  flex  x000D    align-items  center  x000D       More style     x000D    height  300px  x000D    background-color   888  x000D    x000D   lt div gt  x000D    Your text here  x000D   lt  div gt  x000D   x000D   x000D    And if you want  horizontal    x000D   x000D  div   x000D    display  -webkit-flex  x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D       More style     x000D    height  300px  x000D    background-color   888  x000D    x000D   lt div gt  x000D    Your text here  x000D   lt  div gt  x000D   x000D   x000D    You must see the browser version you need  in old versions the code doesn   t work

User · Answer

HTML   lt div class  relative  gt  lt  --used as a container-- gt       lt  -- add content here to to make some height and width     example  lt img src    alt    gt  -- gt       lt div class  absolute  gt           lt div class  table  gt               lt div class  table-cell  gt                  Vertical contents goes here              lt  div gt           lt  div gt       lt  div gt   lt  div gt    CSS    relative        position  relative       absolute        position  absolute       top  0       bottom  0       left  0       right  0       background  rgba 0  0  0  0 5        table        display  table       height  100        width  100        text-align  center       color   fff       table-cell        display  table-cell       vertical-align  middle

User · Answer

You can use css flexbox    x000D   x000D   testimonialText   x000D    height  500px  x000D    padding  1em  x000D    display  flex  x000D    align-items  center  x000D    justify-content  center  x000D    border  1px solid  b4d2d2  x000D    x000D   lt div class  testimonialText  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor x000D    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is another variation of the div in a div pattern using calc   in CSS    lt div style  height 300px  border 1px solid green   gt    Text in outer div     lt div style  position absolute  height 20px  top calc 50  - 10px   border 1px solid red    gt      Text in inner div     lt  div gt   lt  div gt    This works  because    position absolute for precise placement of the div within a div we know the height of the inner div because we set it to 20px  calc 50  - 10px  for 50  - half the height for centering the inner div

User · Answer

If you need to use with the min-height property you must add this CSS on    outerContainer  innerContainer       height  0      min-height  100px

User · Answer

There s a simpler way to vertically align the content without resorting to table table-cell   http   jsfiddle net bBW5w 1   In it I have added an invisible  width 0  div that assumes the entire height of the container   It seems to work in Internet nbsp Explorer and Firefox  latest versions   I didn t check with other browsers     lt div class  t  gt        lt div gt           everything is vertically centered in modern IE8  and others        lt  div gt         lt div gt  lt  div gt      lt  div gt    And of course the CSS    t   t  gt  div first-child       border  1px solid green     t       height  400px     t  gt  div       display  inline-block      vertical-align  middle    t  gt  div last-child       height  100

User · Answer

Using CSS grid did it for me    x000D   x000D   outer   x000D    background-color  grey  x000D    width  10rem  x000D    height  10rem  x000D    display  grid  x000D    justify-items  center  x000D    x000D   x000D   inner   x000D    background-color  red  x000D    align-self  center  x000D    x000D   lt div class  outer  gt  x000D     lt div class  inner  gt  x000D      Content x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

These days  we don t need Internet nbsp Explorer 6-7-8 any more  I would just use CSS display  table for this issue  or display  flex      For older browsers   Table   x000D   x000D   vcenter   x000D      display  table  x000D      background   eee     optional    x000D      width  150px  x000D      height  150px  x000D      text-align  center     optional    x000D    x000D   x000D   vcenter  gt   first-child   x000D      display  table-cell  x000D      vertical-align  middle  x000D    x000D   lt div class  vcenter  gt  x000D     lt p gt This is my Text lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Flex   x000D   x000D   vcenter   x000D      display  flex      lt -- Here    x000D      align-items  center      lt -- Here    x000D      justify-content  center     optional    x000D      height  150px      lt -- Here    x000D      background   eee      optional    x000D      width  150px  x000D    x000D   lt div class  vcenter  gt  x000D     lt p gt This is my text lt  p gt  x000D   lt  div gt  x000D   x000D   x000D      This is  actually  was  my favorite solution for this issue  simple and very well browser supported     x000D   x000D  div   x000D      margin  5px  x000D      text-align  center  x000D      display  inline-block  x000D    x000D   x000D   vcenter   x000D      background   eee      optional    x000D      width  150px  x000D      height  150px  x000D    x000D   vcenter before   x000D      content       x000D      display  inline-block  x000D      height  100   x000D      vertical-align  middle  x000D      max-width  0 001      Just in case the text wrapps  you shouldn t notice it    x000D    x000D   x000D   vcenter  gt   first-child   x000D      display  inline-block  x000D      vertical-align  middle  x000D      max-width  99 999   x000D    x000D   lt div class  vcenter  gt  x000D     lt p gt This is my text lt  p gt  x000D   lt  div gt  x000D   lt div class  vcenter  gt  x000D     lt h4 gt This is my Text lt br  gt Text lt br  gt Text lt  h4 gt  x000D   lt  div gt  x000D   lt div class  vcenter  gt  x000D     lt div gt  x000D      lt p gt This is my lt  p gt  x000D      lt p gt Text lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A simple solution to an element of not knowing values   HTML   lt div class  main  gt       lt div class  center  gt          whatever      lt  div gt   lt  div gt    CSS    main       position  relative     center       position  absolute      top  50       left  50       transform  translate -50   -50        -webkit-transform  translate -50   -50        -moz-transform  translate -50   -50        -o-transform  translate -50   -50

User · Answer

Try this  add on the parent div    display  flex  align-items  center

User · Answer

Check this simple solution   HTML   lt div class  block-title  gt  lt h3 gt I m a vertically centered element lt  h3 gt  lt  div gt    CSS   block-title       float  left      display  block      width  100       height  88px     block-title h3       display  table-cell      vertical-align  middle      height  inherit     JSFiddle

User · Answer

The correct way to do this in modern browsers is to use Flexbox  See this answer for details  See below for some older ways that work in older browsers   Vertical Centering in CSS http   www jakpsatweb cz css css-vertical-center-solution html Article summary  For a CSS  2 browser  one can use display table display table-cell to center content  A sample is also available at JSFiddle   x000D   x000D  div   border 1px solid green   x000D   lt div style  display  table  height  400px  overflow  hidden   gt     lt div style  display  table-cell  vertical-align  middle   gt       lt div gt        everything is vertically centered in modern IE8  and others       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D   It is possible to merge hacks for old browsers  Internet  Explorer  6 7  into styles with using   to hide styles from newer browsers   x000D   x000D  div   border 1px solid green   x000D   lt div style  display  table  height  400px   position  relative  overflow  hidden   gt     lt div style        position  absolute   top  50  display  table-cell  vertical-align  middle   gt       lt div style    position  relative   top  -50   gt        everything is vertically centered      lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Hmm  there re obviously many ways to solve this   But I have a  lt div gt  that s positioned absolutely  height 100   actually  top 0 bottom 0 and fixed width  and display table-cell just didn t work to center text vertically   My solution did require an inner span element  but I see many of the other solutions do also  so I might as well add it   My container is a  label and I want the number vertically centered in it   I did it by positioning absolutely at top 50  and setting line-height 0   lt div class  label  gt  lt span gt 1  lt  span gt  lt  div gt    And the CSS is as follows    label       position absolute      top 0      bottom 0      width 30px      label gt span       position absolute      top 50       line-height 0      See it in action   http   jsfiddle net jcward 7gMLx

User · Answer

lt  DOCTYPE html gt   lt html gt      lt head gt       lt style gt         container           height  250px          background   f8f8f8          display  -ms-flexbox          display  -webkit-flex          display  flex          -ms-flex-align  center          align-items  center          -webkit-box-align  center          justify-content  center                p          font-size  24px               lt  style gt     lt  head gt      lt body gt       lt div class  container  gt         lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  p gt       lt  div gt     lt  body gt    lt  html gt

User · Answer

You can do this by setting the display to  table-cell  and applying a vertical-align  middle                  display  table-cell          vertical-align  middle          This is however not supported by all versions of Internet Explorer according to this excerpt I copied from http   www w3schools com cssref pr class display asp without permission   Note  The values  inline-table    table    table-caption    table-cell    table-column    table-column-group    table-row    table-row-group   and  inherit  are not supported by Internet nbsp Explorer nbsp 7 and earlier  Internet nbsp Explorer nbsp 8 requires a  DOCTYPE  Internet nbsp Explorer nbsp 9 supports the values   The following table shows the allowed display values also from http   www w3schools com cssref pr class display asp

User · Answer

Flexbox worked perfectly for me  centering multiple elements inside parent div horizontally  amp  vertically   HTML-Code    lt div class  parent-div  gt       lt div class  child-div  gt         lt a class  footer-link  href  https   www github com   gt GitHub lt  a gt         lt a class  footer-link  href  https   www facebook com   gt Facebook lt  a gt         lt p class  footer-copywrite  gt    2019 Lorem Ipsum  lt  p gt       lt  div gt     lt  div gt    CSS-Code  Code below stacks all elements inside of parent-div in a column  centering the elements horizontally  amp  vertically  I used the child-div to keep the two Anchor elements on same line  row   Without child-div all three elements  Anchor  Anchor  amp  Paragraph  are stacked inside parent-div s column on top of each other  Here only child-div is stacked inside parent-div column          parent-div     height  150px    display  flex    flex-direction  column    justify-content  center

User · Answer

Here is a solution that works best for a single line of text   It can also work for multi-lined text with some tweaking if the number of lines is known    testimonialText       font-size  1em     Set a font size       testimonialText before      Add a pseudo element        content          display  block      height  50       margin-top  -0 5em     Half of the font size        Here is a JSFiddle

User · Answer

I use the following to vertically center random elements easily   HTML    lt div style  height  200px  gt       lt div id  mytext  gt This is vertically aligned text within a div lt  div gt   lt  div gt    CSS    mytext       position  relative      top  50        transform  translateY -50        -webkit-transform  translateY -50        This centers the text in my div to the exact vertical middle of a 200px-high outer div  Note that you may need to use a browser prefix  like -webkit- in my case  to make this work for your browser   This works not only for text  but also for other elements

User · Answer

You can align center text vertically inside a div using Flexbox    lt div gt      lt p class  testimonialText  gt This is the testimonial text  lt  p gt   lt  div gt   div      display  flex     align-items  center      You can learn more about it at A Complete Guide to Flexbox

User · Answer

Margin auto on a grid-item   Similarly to Flexbox  applying margin auto on a grid-item centers it on both axes    container     display  grid     element     margin  auto

User · Answer

Using flex  be careful with differences in browsers  rendering   This works well both for Chrome and Internet nbsp Explorer    x000D   x000D   outer   x000D      display  flex  x000D      width  200px  x000D      height  200px  x000D      background-color   ffc  x000D    x000D   x000D   inner   x000D      display  flex  x000D      width  50   x000D      height  50   x000D      margin  auto  x000D      text-align  center  x000D      justify-content  center  x000D      align-items  center  x000D      background-color   fcc  x000D    x000D   lt div class  outer  gt  lt div class  inner  gt Active Tasks lt  div gt  lt  div gt  x000D   x000D   x000D    Compare with this one that works only with Chrome    x000D   x000D   outer   x000D      display  flex  x000D      width  200px  x000D      height  200px  x000D      background-color   ffc  x000D    x000D   x000D   inner   x000D      display  flex  x000D      width  50   x000D      height  50   x000D      margin  auto  x000D      background-color   fcc  x000D    x000D   lt div class  outer  gt  x000D   lt div class  inner  gt  lt span style   margin  auto   gt Active Tasks lt  span gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There are several tricks to display content or an image in the center of a div  Some of the answers are really nice and I am fully agree with these too   Absolute Horizontal And Vertical Centering In CSS  http   www css-jquery-design com 2013 12 css-techniques-absolute-horizontal-and-vertical-centering-in-css   There are more than 10 techniques with examples  Now it s up to you which you prefer   No doubt  display table  display table-Cell is a better trick   Some good tricks are the following   Trick 1 - By using display table  display table-cell  HTML   lt div class  Center-Container is-Table  gt     lt div class  Table-Cell  gt       lt div class  Center-Block  gt          CONTENT      lt  div gt     lt  div gt   lt  div gt    CSS Code   Center-Container is-Table   display  table     is-Table  Table-Cell     display  table-cell    vertical-align  middle     is-Table  Center-Block     width  50     margin  0 auto      Trick 2 - By using display inline-block  HTML   lt div class  Center-Container is-Inline  gt     lt div class  Center-Block  gt       CONTENT    lt  div gt   lt  div gt    CSS code   Center-Container is-Inline     text-align  center    overflow  auto      Center-Container is-Inline after   is-Inline  Center-Block     display  inline-block    vertical-align  middle      Center-Container is-Inline after     content        height  100     margin-left  -0 25em     To offset spacing  May vary by font        is-Inline  Center-Block     max-width  99      Prevents issues with long content causes the content block to be pushed to the top         max-width  calc 100  - 0 25em     Only for Internet amp nbsp Explorer 9         Trick 3 - By using position relative position absolute   lt div style  position  relative  background   ddd  border  1px solid  ddd  height  250px   gt     lt div style  width  50   height  60   overflow  auto  margin  auto  position  absolute  top  0  left  0  bottom  0  right  0  background   ccc  text-align  center   gt       lt h4 gt ABSOLUTE CENTER   lt br  gt  WITHIN CONTAINER  lt  h4 gt       lt p gt This box is absolutely centered  horizontally and vertically  within its container lt  p gt     lt  div gt   lt  div gt

User · Answer

According to Adam Tomat s answer there was prepared a JSFiddle example to align the text in div    lt div class  cells-block  gt          text lt br  gt in the block     lt  div gt    by using display flex in CSS    cells-block       display  flex      flex-flow  column      align-items  center           Vertically          justify-content  flex-end     Horisontally        text-align  right             Addition  for text s lines        with another example and a few explanations in a blog post

User · Answer

This is the cleanest solution I have found  Internet nbsp Explorer nbsp 9   and adds a fix for the  off by  5 pixel  issue by using transform-style that other answers had omitted    parent-element     -webkit-transform-style  preserve-3d    -moz-transform-style  preserve-3d    transform-style  preserve-3d      element     position  relative    top  50     -webkit-transform  translateY -50      -ms-transform  translateY -50      transform  translateY -50        Source  Vertical align anything with just 3 lines of CSS

User · Answer

Here s a great resource  From http   howtocenterincss com       Centering in CSS is a pain in the ass  There seems to be a gazillion ways to do it  depending on a variety of factors  This consolidates them and gives you the code you need for each situation    Using Flexbox  Inline with keeping this post up to date with the latest tech  here s a much easier way to center something using Flexbox  Flexbox isn t supported in Internet nbsp Explorer nbsp 9 and lower   Here are some great resources    A guide to Flexbox Centering elements with Flexbox Internet nbsp Explorer nbsp 10 syntax for Flexbox Support for Flexbox   JSFiddle with browser prefixes   x000D   x000D  li   x000D    display  flex  x000D    justify-content  center  x000D    align-content  center  x000D    flex-direction  column  x000D       Column   row    x000D    x000D   lt ul gt  x000D     lt li gt  x000D       lt p gt Some Text lt  p gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt p gt A bit more text that goes on two lines lt  p gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt p gt Even more text that demonstrates how lines can span multiple lines lt  p gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Another solution  This is from zerosixthree and lets you center anything with six lines of CSS  This method isn t supported in Internet nbsp Explorer nbsp 8 and lower   jsfiddle   x000D   x000D  p   x000D    text-align  center  x000D    position  relative  x000D    top  50   x000D    -ms-transform  translateY -50    x000D    -webkit-transform  translateY -50    x000D    transform  translateY -50    x000D    x000D   lt ul gt  x000D     lt li gt  x000D       lt p gt Some Text lt  p gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt p gt A bit more text that goes on two lines lt  p gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt p gt Even more text that demonstrates how lines can span multiple lines lt  p gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Previous answer  A simple and cross-browser approach  useful as links in the marked answer are slightly outdated      How to vertically and horizontally center text in both an unordered list and a div without resorting to JavaScript or CSS line heights  No matter how much text you have you won t have to apply any special classes to specific lists or divs  the code is the same for each   This works on all major browsers including Internet nbsp Explorer nbsp 9  Internet nbsp Explorer nbsp 8  Internet nbsp Explorer nbsp 7  Internet nbsp Explorer nbsp 6  Firefox  Chrome  Opera and Safari  There are two special stylesheets  one for Internet nbsp Explorer nbsp 7 and another for Internet nbsp Explorer nbsp 6  to help them along due to their CSS limitations which modern browsers don t have    Andy Howard - How to vertically and horizontally center text in an unordered list or div  As I didn t care much for Internet nbsp Explorer nbsp 7 6 for the last project I worked on  I used a slightly stripped down version  i e  removed the stuff that made it work in Internet nbsp Explorer nbsp 7 and 6   It might be useful for somebody else     JSFiddle   x000D   x000D   outerContainer   x000D    display  table  x000D    width  100px  x000D       Width of parent    x000D    height  100px  x000D       Height of parent    x000D    overflow  hidden  x000D    x000D   x000D   outerContainer  innerContainer   x000D    display  table-cell  x000D    vertical-align  middle  x000D    width  100   x000D    margin  0 auto  x000D    text-align  center  x000D    x000D   x000D  li   x000D    background   ddd  x000D    width  100px  x000D    height  100px  x000D    x000D   lt ul gt  x000D     lt li gt  x000D       lt div class  outerContainer  gt  x000D         lt div class  innerContainer  gt  x000D           lt div class  element  gt  x000D             lt p gt  x000D               lt  -- Content -- gt  x000D              Content x000D             lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  li gt  x000D   x000D     lt li gt  x000D       lt div class  outerContainer  gt  x000D         lt div class  innerContainer  gt  x000D           lt div class  element  gt  x000D             lt p gt  x000D               lt  -- Content -- gt  x000D              Content x000D             lt  p gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

CSS    vertical      display  table-caption      Add this class to the element that contains the things you want to align vertically

User · Answer

HTML    lt div class  quot col-md-2 ml-2 align-middle quot  gt       lt label for  quot option2 quot  id  quot time-label quot  gt Time lt  label gt   lt  div gt   CSS    align-middle       margin-top  auto      margin-bottom  auto

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

Examples related to html

Examples related to css

Examples related to vertical-alignment