/    Sign up×
Community /Pin to ProfileBookmark

Vertical centering of text

Copy linkTweet thisAlerts:
Jul 12.2005

Is there any simple way to position a text into middle of the screen or layer? A number of HTML objects support horizontal alignment, but apart from table nothing seems to support vertical alignment. I have read in a book that <span> supports vertical-align style, but I could never get it to work.

Any advice would be greatly appreciated.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@JuparisJul 12.2005 — Could you show us some of the coding that you've tried?

I'd think that placing the span inside a div would work--have you tried that yet?

Also make sure you're using [i]middle[/i] with the vertical-align attribute.. Sometimes people use [i]center[/i], which is wrong..
Copy linkTweet thisAlerts:
@VicauthorJul 12.2005 — This is a <span> that I tried, which works in all respects except for the vertical-align property:

[CODE]<span id=aaa style='POSITION: absolute; TOP: 0px; LEFT: 0px; WIDTH: 100%; HEIGHT: 100%; TEXT-ALIGN: CENTER; vertical-align: bottom'>Message</span>[/CODE]
Copy linkTweet thisAlerts:
@WoDJul 12.2005 — I have a motto: If at first you don't succeed, cheat.

In other words, just slap a single cell table into your page and use that to align vertically. Sure it will not validate, but no end-user or browser cares a damn about how valid your (X)HTML is anyway.
Copy linkTweet thisAlerts:
@KravvitzJul 13.2005 — Vertical-align, except when used in a table-cell, only aligns the object relative to the line box, not the block box.

http://www.dynamicsitesolutions.com/css/vertically_centering_elements/
×

Success!

Help @Vic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...