To align the text contents of this div vertically center.

css align code 
#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>

  • This approach can only works for a single line of text
css align code 
div
{
  height: 90px;
  line-height: 90px;

  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>
  • solution for a single line and multiple lines of text
css align code 
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>

  • Use the below CSS code
text align code 
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>
[ad type=”banner”]

  • Flexible approach for vertical alignment:
text align code 
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>

  • For reference and simpler answer for vertically center text:
  • Pure CSS:
text align code 
vertical-align 
{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
div align center 
Or as a SASS/SCSS Mixin:
@mixin vertical-align 
{
    position: relative;
    top: 60%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
[ad type=”banner”]
  • Use by:
div align center 
.class-to-center 
{
    @include vertical-align;
}
  • The element being placed on a “half pixel”. A solution for this parent element to preserve-3d. Like following:
    .parent-element
text align css code 
{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

  • For a single line of text
  • It can be used when #box has non-fixed, relative height in %.
text align css code 
<div id="box"></div>
#box::before
{
    display: block;
    content: "";
    height: 50%;
}
#box::after 
{
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}
  • If we need to place inner text in HTML, not in CSS, then we need to wrap text content in additional inline element and edit  #box:: after to match it.

For example,

align center css 
<div id="box"><span>TextContent</span></div>
In this case #box::after should be replaced to #box span.

  • A very simple & most powerful solution to vertically align center:
align center css 
.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>
[ad type=”banner”]

  • 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.
  • So we can write,
align center css 
.element 
{
    position: relative;
    top: 50%;
   transform: translateY(-50%);
}
  • It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent

  • 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.
html align code 
div
{
  height:120px;
  line-height: 120px;
}
Another way,
div 
{
   padding: 60px 0;
}
  • 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.

  • For all our vertical alignment
html align code 
@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();
}

  • vertically center style
html align code 
#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>
  • 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.

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,