{"id":354,"date":"2017-03-14T13:41:03","date_gmt":"2017-03-14T13:41:03","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=354"},"modified":"2017-03-29T17:54:43","modified_gmt":"2017-03-29T12:24:43","slug":"how-vertically-center-text-css","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/how-vertically-center-text-css\/","title":{"rendered":"[10 Solved Answer]How to vertically center text with CSS"},"content":{"rendered":"

To align the text contents of this div vertically center.<\/p>\n

css align code<\/span> <\/div> 
#box{  height: 90px;  width: 270px;  background: #001;  font-size: 48px;  font-style: oblique;  color: #FFF;  text-align: center;  margin-top: 21px;  margin-left: 5px;}<div Id="box">  Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/div><\/code><\/pre> <\/div>\n
    \n
  • This approach can only works for a single line of text<\/li>\n<\/ul>\n
     
     css align code<\/span> <\/div> 
    div{  height: 90px;  line-height: 90px;  text-align: center;  border: 2px dashed #f69c55;}<div>  Hello World!<\/div><\/code><\/pre> <\/div>\n
      \n
    • solution for a single line and multiple lines of text<\/li>\n<\/ul>\n
       
       css align code<\/span> <\/div> 
      div {  height: 200px;  line-height: 200px;  text-align: center;  border: 2px dashed #f69c55;}span {  display: inline-block;  vertical-align: middle;  line-height: normal;}<div>  <span>Welcome to Wikitechy. <\/span><\/div><\/code><\/pre> <\/div>\n
        \n
      • Use the below CSS code<\/li>\n<\/ul>\n
         
         text align code<\/span> <\/div> 
        display: table-cell;vertical-align: middle; finally CSS looks like:#box {  height: 90px;  width: 270px;  background: #001;  font-size: 48px;  font-style: oblique;  color: #FFF;  text-align: center;  margin-top: 20px;  margin-left: 5px;  display: table-cell;  vertical-align: middle;}<div id="box">  Some text<\/div><\/code><\/pre> <\/div>\n[ad type=”banner”]\n
          \n
        • Flexible approach for vertical alignment:<\/li>\n<\/ul>\n
           
           text align code<\/span> <\/div> 
          div {  width: 250px;  min-height: 50px;  line-height: 50px;  text-align: center;  border: 1px solid #123456;  margin-bottom:6px;}span {  display: inline-block;  vertical-align: middle;  line-height: normal;}<div>  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br \/>    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br \/>   Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/div><div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/span><\/div><div>  <span>Lorem ipsum dolor sit amet.<\/span><\/div><div><\/code><\/pre> <\/div>\n
            \n
          • For reference and simpler answer for vertically center text:<\/li>\n
          • Pure CSS:<\/li>\n<\/ul>\n
             
             text align code<\/span> <\/div> 
            vertical-align {    position: relative;    top: 50%;    -webkit-transform: translateY(-50%);    -ms-transform: translateY(-50%);    transform: translateY(-50%);}<\/code><\/pre> <\/div>\n
             
             div align center<\/span> <\/div> 
            Or as a SASS\/SCSS Mixin:@mixin vertical-align {    position: relative;    top: 60%;    -webkit-transform: translateY(-50%);    -ms-transform: translateY(-50%);    transform: translateY(-50%);}<\/code><\/pre> <\/div>\n[ad type=”banner”]\n
              \n
            • Use by:<\/strong><\/li>\n<\/ul>\n
               
               div align center<\/span> <\/div> 
              .class-to-center {    @include vertical-align;}<\/code><\/pre> <\/div>\n
                \n
              • The element being placed on a \u201chalf pixel\u201d. A solution for this parent element to preserve-3d. Like following:
                \n.parent-element<\/li>\n<\/ul>\n
                 
                 text align css code<\/span> <\/div> 
                {    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    transform-style: preserve-3d;}<\/code><\/pre> <\/div>\n
                  \n
                • For a single line of text<\/li>\n
                • It\u00a0can\u00a0be used when\u00a0#box has non-fixed,\u00a0relative height in %.<\/li>\n<\/ul>\n
                   
                   text align css code<\/span> <\/div> 
                  <div id="box"><\/div>#box::before{    display: block;    content: "";    height: 50%;}#box::after {    vertical-align: top;    line-height: 0;    content: "TextContent";}<\/code><\/pre> <\/div>\n
                    \n
                  • If we need to place inner text in HTML, not in CSS, then we need to wrap text content in additional\u00a0inline\u00a0element and edit\u00a0 #box:: after to match it.<\/li>\n<\/ul>\n
                    For example,<\/strong><\/p>\n
                     
                     align center css<\/span> <\/div> 
                    <div id="box"><span>TextContent<\/span><\/div>In this case #box::after should be replaced to #box span.<\/code><\/pre> <\/div>\n
                      \n
                    • A very simple & most powerful solution to vertically align center:<\/li>\n<\/ul>\n
                       
                       align center css<\/span> <\/div> 
                      .outer-div { height: 100px;  width: 200px;  text-align: center;  border: 1px solid #000;}.inner {  position: relative;  top: 45%;  transform: translateY(-45%);  color: red;}<div class="outer-div">  <span class="inner">No data available<\/span><\/div><\/code><\/pre> <\/div>\n[ad type=”banner”]\n
                        \n
                      • The CSS property transform is usually used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require us to either know the height of the element or only works on single-line text, etc.<\/li>\n
                      • So we can write,<\/li>\n<\/ul>\n
                         
                         align center css<\/span> <\/div> 
                        .element {    position: relative;    top: 50%;   transform: translateY(-50%);} <\/code><\/pre> <\/div>\n
                          \n
                        • It is a similar technique to the absolute-position method, but with the upside that we don\u2019t have to set any height on the element or position-property on the parent<\/li>\n<\/ul>\n
                            \n
                          • To achieve the effect of line-height, it only works if we have one line of text. if we had more content, the text will still be centered, but the div itself will be slightly larger.<\/li>\n<\/ul>\n
                             
                             html align code<\/span> <\/div> 
                            div{  height:120px;  line-height: 120px;}Another way,div {   padding: 60px 0;}<\/code><\/pre> <\/div>\n
                              \n
                            • It set the top and bottom padding of the div to 60px, and the left and right padding to zero, making the div 120px high, and placing the text vertically centered in the div.<\/li>\n<\/ul>\n
                                \n
                              • For all our vertical alignment<\/li>\n<\/ul>\n
                                 
                                 html align code<\/span> <\/div> 
                                @mixin vertical-align($position: relative) {  position: $position;  top: 60%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}Then include.element{    @include vertical-align();}<\/code><\/pre> <\/div>\n
                                  \n
                                • vertically center style<\/li>\n<\/ul>\n
                                   
                                   html align code<\/span> <\/div> 
                                  #box{  display: table-cell;  vertical-align: middle;  height: 90px;  width: 270px;  background: #000;  font-size: 48px;  font-style: oblique;  color: #FFF;  text-align: center;  margin-top: 20px;  margin-left: 5px;}<div Id="box">  Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/div><\/code><\/pre> <\/div>\n
                                    \n
                                  • This article provides some of the basic informations on css vertical align , css align , text align , div align center , vertical , align center , html align , vertically center div , html align text , vertical align middle css , html text align center , css image , table align center css , vertical and horizontal , horizontal and vertical , html image center.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
                                    PROBLEM To align the text contents of this div vertically center. SOLUTION 1: This approach can only works for a single line of text solution for a single line and multiple lines of text SOLUTION 2: Use the below CSS code [ad type=”banner”] SOLUTION 3: Flexible approach for vertical alignment: SOLUTION 4: For reference and […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[1401,40,710,1398,1407,1397,728,729,713,709,1399,520,1410,722,714,723,717,1402,1404,1411,1406,1408,513,718,1400,712,727,1405,725,726,724,716,1409,715,719,721,1403,711,720],"class_list":["post-354","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-align-center","tag-center-text-in-div","tag-centering-in-css","tag-css-align","tag-css-image","tag-css-vertical-align","tag-css-vertical-align-div","tag-css-vertical-align-middle","tag-css-vertical-center","tag-css-vertical-align-property","tag-div-align-center","tag-horizontal-align-css","tag-horizontal-and-vertical","tag-how-to-align-to-middle-by-height","tag-how-to-center-in-css","tag-how-to-vertically-align-an-image-inside-div","tag-how-to-vertically-center-a-div-for-all-browsers","tag-html-align","tag-html-align-text","tag-html-image-center","tag-html-text-align-center","tag-table-align-center-css","tag-text-align","tag-true-center-vertical-and-horizontal-css-div","tag-vertical","tag-vertical-align-anything-with-just-3-lines-of-css","tag-vertical-align-div-inside-div","tag-vertical-align-middle-css","tag-vertical-align-middle-div","tag-vertical-align-middle-not-working","tag-vertical-align-text-in-div","tag-vertical-alignment-of-elements-in-a-div","tag-vertical-and-horizontal","tag-vertical-align","tag-vertical-align-with-inline-elements","tag-vertically-align-text-in-element-with-css","tag-vertically-center-div","tag-vertically-center-multi-lined-text","tag-vertically-center-text-in-an-absolutely-centered-sphere"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}