Site members can create their own journals and post comments.
CSS Help
01-13-2007 at 11:40 am


I'm attempting to learn the "correct and proper" way to code HTML, separating content from style, and using divs instead of tables. Doesn't seem like it should be that tough, but I'm running into problems with some of the basics. Thanks to any web gurus who can help me out with a specific question.

If I have a div tag that has a height set to 50, and I want the inner text to display centered vertically, what style do I set? I thought vertical-align:middle would do it, but it don't.

Example:
<div style="
border: 1px solid White;
height: 50px;
width: 300px;
vertical-align:middle">
Inner Text
</div>

yeilds this:
Inner Text






 View jwalker's other journal entries.  View jwalker's profile.  Create an account 

Posted Comments
Registered site members may leave comments.

casmhar       01-13-2007, 12:30 pm
Clicky


casmhar       01-13-2007, 12:31 pm
Clicky II


jwalker       01-13-2007, 12:49 pm
Thanks, I have those tints already. but couldn't find an answer the or on Google.

Anyone happen to know the answer?


jwalker       01-13-2007, 12:51 pm
^tints = links

(bad character recognition - lol)


casmhar       01-13-2007, 01:26 pm

text




casmhar       01-13-2007, 01:28 pm
p align = "center" your text /p



vasudeva       01-13-2007, 02:05 pm
Centering elements vertically, as I recall, is one of those tough-to-do-cleanly-with-CSS things. I'm sure you could hack something up that would achieve it, like screwing with the box model attributes of your container or applying padding to the element, but I don't think there's a clean reliable way to get what you want using untricky CSS.


jwalker       01-13-2007, 02:05 pm
That aligns horizontally, not vertically. Besides - I want a CSS solution, not inline formatting.

<div style="
border: 1px solid White;
height: 50px;
width: 300px;
vertical-align:middle">
<p align="center">Inner Text</p>
</div>

Inner Text



The question remains...


jwalker       01-13-2007, 02:11 pm
vasudeva: Can't be done.

hmph. That seems like a serious oversight, but oh well. I'll use a table for that part, and follow up here if I find a better way. thx


IMBOLCPunxsutawneyPhil       01-13-2007, 03:13 pm
div {text-align: center}


IMBOLCPunxsutawneyPhil       01-13-2007, 03:23 pm
oh and if you inist on inline:

Inner Text


jwalker       01-13-2007, 03:33 pm
Phil: vertical means up <-> down


vasudeva       01-13-2007, 03:41 pm
Haha. Way to go, phil.


IMBOLCPunxsutawneyPhil       01-13-2007, 03:46 pm
fucking yuck.



Inner Text


IMBOLCPunxsutawneyPhil       01-13-2007, 04:04 pm
ok fucks it. I am not gonna recreate the wheel.

http://www.student.oulu.fi/~laurirai/www/css/middle/

margin paddings, and absolute/relateive positioning of inline elements.

[I seriously thought there was an attempt to center text, not vertically. really. ]


jwalker       01-15-2007, 09:57 pm
I found some info here.

It's a total kludge, and I don't plan to use it - plus, looking at how it renders here, it obviously doesn't work quite right under certain conditions:
<div style="border: 1px solid White; height: 50px; width: 300px; text-align:center; display: table; #position: relative; overflow: hidden; ">
<div style="#position: absolute; _top: 50%; _left: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%; left:-50%;">
Inner Text
</div>
</div>
</div>
Inner Text





mofo       01-16-2007, 11:24 pm
What reason do you have for centering your text verticle?


jwalker       01-17-2007, 08:45 am
Just various places in the page layout. Really, I'm just trying to improve my skills, and this particular issue seemed especially annoying.


jwalker       01-18-2007, 03:08 pm
Here's a good article/site with some counter arguments against "The Consortium of CSS Elitists".



  Forum Shite
Madness > Camphone Thread
Serious > azron
Serious > Oil and your life?
Technology > My RSS Feeds
Madness > YouTube graveyard +
Sexual > Bangbus pw
Newbs > Have at it
Madness > Yes. It's true. +
Technology > IE 6 and FireFo+
Serious > given blood
Madness > Vas in TX
Music > Chinese Democracy
Technology > CSS Newb, resou+
Madness > u put pitcures her+
Reviews > todaynic.com to be+
  Journal Shite
World's Most Expensive Desi+
The Skin Ranch and The Hand+
this is all
guess who's here
Michael Jackson's Clothing +
ATTENTION!
.13
Out on the town
Star Wreck
Happy F werd day motherfuck+
Anon vs. Scientology
What the hell, Jesus?
Bank Issues and the Ex
oh fuk.
Dharma Intiative
  LinkSwarm Login
Nickname

Password

Join us.
  Sexual Asspussy
This is awesome.

This is the first pornsite I've found in years that I'd actually advertise to swarmers. When you first load it up, it looks just like every crappy scam site out there, except that it's real. It's huge, it's updated constantly, there's no spam, no popups, and no bullshit -- and it's completely free. When you sign up through that link above and respond to the confirmation email, I make a bit of loose change.

See what other swarmers have to say about it. People love this place, so I feel fine about sending you there and am confident you will enjoy boners.
  RadFactor
nocal 9480
LORDKAHUNA 3240
Danny_Infer+ 2980
trickbear 2620
mstrlance 2400
wotak 1600
Clavis_Apoc+ 1420
johnlenin 960
shitbox 960
bigdinwauna+ 940
  LinkSwarm Friends
 chrudat 6189 
 thechump 1459 
 entensity 623 
 yourdirtymind 539 
 Wild Amateurs 535 
 ebaumsworld 512 
 killsometime 426 
 wtfpeople 240 
 dailyrotation 226 
 atomicmovies 184 
 oddee 137 
 chicksnbreasts 129 
 plinko 109 
 linkdump 94 
 ebizmba 81 
 unknownnews 58 
 pussycompass 51 
 charlie 49 
 2spare 44 
 i-am-bored 42 
 not-healthy 34 
 microsoft 32 
 linksonice 32 
 mindfvck 30 
 bloglines 27 
 themostboringb 27 
 hotchicksdaily 24 
 forum 23 
[ more sites ]
[ add your site ]
  My God, It's Full of Azron

BeachGoat : Thisis the sou nd of bad edittting
johnlenin : mmm, painful headphone pops
jwalker : stay sane - maintain - explain
MstrLance : Whoa. That was insanely cool.
mundhra : http://www.vimeo.com/ 1109226
BOBacus : Gholām-Hossein Banān, he fart a yellow froots
MstrLance : http://en.wikipedia.o rg/wiki/Gholam_Hossei n_Banan
MstrLance : banan ass
johnlenin : BANANS*
bObacUs : Ass taste liek bananans
bObacUs : are you flirting with me DS?
Dumbskull : How do you know what ass tastes like?
johnlenin : SMiLE
Clavis_Apocalypticae: My Geefemail is down
MstrLance : Still workin' that virtual box.
government_death_rob: firewalls still work through a virtualbox?
bObacUs : it tastes like ass
Clavis_Apocalypticae: Linkswarm isn't tasteless. It haz a flavur
bObacUs : well, tasteless is a start.
ragoo : my firewall at work blocks Linkswarm because it says it's "tasteless"


Only Registered Users can Shout
Create/Login

How do you know I do not look decent or at least semi hawt? You fucking sexist swine! -- dumbskull