/    Sign up×
Community /Pin to ProfileBookmark

quick question :How do i vertically and horizontally center some text inside a div ta

How do i vertically and horizontally center some text inside a div tag? the div is 400px by 400px
thanks

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@saulssauthorOct 02.2005 — hmmm... isnt there a simpler way?

like this
[code=html]<div style="width:100px;height:100px;padding: 50%;background-color:red" >
text or image
</div>[/code]

this centers the content vertically and horizontally, but it calculates the 50% based on the width and height of the div AND the width and height of the text.

The other code on that page used and innacurate way to calculate the vertical center. (you will notice it when you resize the window to almost the size of the box inside.)

thanks
Copy linkTweet thisAlerts:
@KravvitzOct 02.2005 — If there is only one line of text, then you only need text-align:center and vertical-align:middle.

Please provide a link to the page in question.

this centers the content vertically and horizontally, but it calculates the 50% based on the width and height of the div AND the width and height of the text.[/QUOTE]
*shrugs* That's the way it works. We can't do anything about it.

The other code on that page used and innacurate way to calculate the vertical center. (you will notice it when you resize the window to almost the size of the box inside.)[/QUOTE]
You mean the code from the demo I linked to? It's a rather complicated demo, perhaps you missed part of the necessary code.
Copy linkTweet thisAlerts:
@saulssauthorOct 02.2005 — i dont think i did, anyways i want to get the effect of this table:

[code=html]<table width="100" height="100" bgcolor="red">
<tr>
<td valign=middle align=center>
txt
</td>
</tr>
</table>[/code]


notice how it centers it without resizing the table, unlike this (posted previously)

[code=html]<div style="width:100px;height:100px;padding: 50%;background-color:red" >
text or image
</div>[/code]


it will be for a menu in which im changing the class on different mouse events, so i wanted to keep the content of an item on single divs, nested into another that holds all of them

thanks

EDIT:

ive tried
[code=html]<div style="width:100;height:100;background-color:red;text-align:center;vertical-align:middle">
txt
</div>[/code]


i get (something like) this

[FONT=Lucida Console]._________.

|...txt...|

|.........|

|.........|

|.........|

|_
__
______|[/FONT] not centered vertically ?
Copy linkTweet thisAlerts:
@KravvitzOct 02.2005 — Sorry. It's not vertical-align:middle that you need. You need line-height:100px.

Unless the value is 0, you must always include units with a length measurement.

width:100[b]px[/b];height:100[b]px[/b];
Copy linkTweet thisAlerts:
@saulssauthorOct 02.2005 — thanks, that line-height:100px did what i wanted ?
Copy linkTweet thisAlerts:
@KravvitzOct 03.2005 — You're welcome ?

Just remember that setting the line-height of an element to its height to vertically center text only works for one line of text.
×

Success!

Help @saulss 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.19,
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,
)...