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,
[pastacode lang=”markup” manual=”%3Cdiv%20id%3D%22box%22%3E%3Cspan%3ETextContent%3C%2Fspan%3E%3C%2Fdiv%3E%0AIn%20this%20case%20%23box%3A%3Aafter%20should%20be%20replaced%20to%20%23box%20span.%0A” message=”align center css” highlight=”” provider=”manual”/]
A very simple & most powerful solution to vertically align center:
[pastacode lang=”css” manual=”.outer-div%20%0A%7B%0A%20height%3A%20100px%3B%0A%20%20width%3A%20200px%3B%0A%20%20text-align%3A%20center%3B%0A%20%20border%3A%201px%20solid%20%23000%3B%0A%7D%0A%0A.inner%20%0A%7B%0A%20%20position%3A%20relative%3B%0A%20%20top%3A%2045%25%3B%0A%20%20transform%3A%20translateY(-45%25)%3B%0A%20%20color%3A%20red%3B%0A%7D%0A%3Cdiv%20class%3D%22outer-div%22%3E%0A%20%20%3Cspan%20class%3D%22inner%22%3ENo%20data%20available%3C%2Fspan%3E%0A%3C%2Fdiv%3E%0A” message=”align center css” highlight=”” provider=”manual”/]
[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,
[pastacode lang=”css” manual=”.element%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20top%3A%2050%25%3B%0A%20%20%20transform%3A%20translateY(-50%25)%3B%0A%7D%20%0A” message=”align center css” highlight=”” provider=”manual”/]
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.
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.
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.
Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.