CSS HTML

[10 Solved Answer]How to vertically center text with CSS

March 14, 2017 2 Min Read

80 0

PROBLEM

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>

SOLUTION 1:

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>

SOLUTION 2:

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”]

SOLUTION 3:

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>

SOLUTION 4:

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;
}

SOLUTION 5:

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.

SOLUTION 6:

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”]

SOLUTION 7:

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

SOLUTION 8:

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.

SOLUTION 9:

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();
}

SOLUTION 10:

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.

Tags:

[10 Solved Answer]How to vertically center text with CSS

Tags:

Wikitechy Editor

Other Articles

[Solved – 11 Answers] Using a regular expression to validate an email address

[10 solved Answers] How to transit height: 0; to height: auto; using CSS

No Comment! Be the first one.

Leave a Reply

Popular Posts

Download Huawei P9 Lite Android Nougat Update [B336]

How to Install TWRP Recovery and Root Mi5s & Mi5s Plus

How to Downgrade Honor 5c from Nougat to Marshmallow

Download ZTE Axon 7 Android 7.1 Nougat Update (MiFavor 4.2)(B13)

Categories

Related Posts

How do I start learning HTML for Beginners?

C Programming – Vertex Cover Problem | Set 1 (Introduction and Approximate Algorithm)

How to Modify the URL without reloading the page

Type and hit Enter to search

Type and hit Enter to search

[10 Solved Answer]How to vertically center text with CSS

Tags:

Share Article

Other Articles

No Comment! Be the first one.

Leave a Reply

Popular Posts

Categories

Related Posts