Solved

CSS Vertical Align, how to?

Posted on 2006-06-15
25
7,733 Views
Last Modified: 2012-05-05
I have an item that is 200x100 pixels. Text inside. I want the text to be dead center. How do I do this?

0
Comment
Question by:digitalpacman
  • 7
  • 6
  • 5
  • +2
25 Comments
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16917452
style="text-align:center;"
0
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16917461
...if thatz not the solution , lemme know whatz the item and what do u have so far
0
 

Author Comment

by:digitalpacman
ID: 16917478
I want vertical align not horizontal align

this is it

<li style="height: 200px; width: 200px">sfsaf</li>
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16918612
Why do you care about vertical centering?  just give it some padding-top.
If you want vertical centering, then you need to use a table-cell element as container.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 16919100
As long as you can garantee there's only a single line of text it could be possible, but I wouldn't recommend it.
0
 
LVL 8

Expert Comment

by:radnor
ID: 16919950
<style>
.dcenter {
   position: absolute;
   left: 50%;
   margin-left: - (WIDTH/2);
   top: 50%;
   margin-top: - (HEIGHT/2);
</style>


The 2 margins (left & top) have a MINUS sign in front of them.
In your case 200px W, 100px H

   margin-left: -100;
   margin-top: -50;


DEAD CENTER!
0
 
LVL 8

Expert Comment

by:radnor
ID: 16919967
Sorry, but my info was wrong.  It would work fine for an image.  Don't know the length of the text.


How much info (TEXT) will you be adding????
0
 
LVL 17

Expert Comment

by:mreuring
ID: 16920006
radnor, what you suggests centers the element, not the contents of it.

Since, there's some bad ideas bound to pop up about this, here's the hack I was talking about for verticaly aligning a single line of text within a fixed-height element:
<div style="width: 200px; height: 100px; line-height: 100px; vertical-align: middle; text-align: center; border: 1px solid silver;">Bad idea!!!</div>
0
 
LVL 8

Expert Comment

by:radnor
ID: 16920032
How much text?  Single line?  Multi?
0
 
LVL 10

Accepted Solution

by:
jagadeesh_motamarri earned 250 total points
ID: 16920079
Hi digitalpacman,

Here is a nice article on what you are looking for. Don;t forget to see the examples which contains your solutions

URL: http://www.badboy.ro/articles/2005-02-20/index.php

I wouldn't mind copying the code for you.

Here it goes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Middle align test - multiple lines</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Lucian Slatineanu, http://www.badboy.ro/" />
<style type="text/css" media="screen">
<!--
p {
      margin:0;
      padding:0;
}
#wrapper {
      width:550px;
      border:1px solid #666;
      padding:10px;
      height:300px;
}
#fixed {
      float:right;
      width:200px;
      height:300px;
      background:#666;
      display:block;
}
#wrapper>#floating { /*display:table for Mozilla & Opera*/
      display:table;
      position:static;
}
#floating { /*for IE*/
      width:300px;
      height:100%;
      background:#EAEAEA;
      position:relative;
}
#floating div { /*for IE*/
      position:absolute;
      top:50%;
}
#floating>div { /*for Mozilla and Opera*/
      display:table-cell;
      vertical-align:middle;
      position:static;
}
#floating div div {
      position:relative;
      top:-50%;
}
-->
</style>
</head>

<body>
<div id="wrapper">
      <img src="0.gif" alt="stuff" id="fixed" />
      <div id="floating"><div><div>

            <p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p>
      </div></div></div>
</div>
</body>
</html>
____________


_______Jags.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16921109
Hey, welcome back Martin, long time no see.
<:°)

jagadeesh_motamarri's example is equivalent to using a table... except that it's not defined in the html as a table (maybe because people are so ashamed to misuse tables).
As far as I'm concerned, if you need to override a div's dispaly to "table", you might as well use a table in the html, that does not make any difference.  If you need the behaviour of a table, then just use a one-cell-only table.  This way, at least your code will be correctly checked when it goes through a validator.
If you want a correct solution, then just don't use any vertical alignment.
0
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16921250
Hi GrandSchtroumpf,

I found this piece of code is doing everything -

>>#floating div div {
     position:relative;
     top:-50%;
}

can you please explain me - >> is equivalent to using a table... except that it's not defined in the html as a table. And was he (digitalpacman) asking the same or did i miss something.


Thank You,
_____Jags.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16922226
> is equivalent to using a table...
Sure i can explain.  What the code does is to override the display propery of block elements for the browser to consider your structure as a table.
And since IE6 does not understand that, you need to add some CSS hacks.

The result is that your code is not better than if you used a table and the code is much more difficult to maintain because of the hack for IE6 and because validators won't be able to check that your "table" is well formed (that the "display:table" element only contains "display:table-row" elements that only contain  "display:table-cell" elements).  That's why overriding the "display" property is a bad practice.

IMHO, if you want the behaviour of a table, you might as well use a table.
The important thing is to keep a valid document structure: valid relationships between your elements.

If you want to do things correctly, then you should not need to have a table behaviour on non-tabular data.
0
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16922776
I really appreciate your time GrandSchtroumpf.

Thank You,
____Jags.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16923681
You are welcom Jags.  <:°)
Note that what i said is only my own opinion, and you'll find lots of people who will argue on which solution is less bad than the other.
And let me repeat that when you use tables for layout, those should absolutely be one-cell-only tables, otherwise it generates wrong relationships between your elements.
0
 

Author Comment

by:digitalpacman
ID: 16924815
I'm deciding what to write as a response to debunk all your solutions.

And btw.. "TABLE" as a display is not supported in IE
0
 

Author Comment

by:digitalpacman
ID: 16924834
To start:

top: -50%? haha? Your elements will go above the browser if its near the top of the page.

That doesn't even logically make sense, how did you come up with that?

jagadeesh_motamarri... way to freaking complicated. Uses images? No thanks.

radnor.. no.. how am I supposed to dynamically get the text length? I mean.. I know I _CAN_ but I don't want to... and ya as stated it aligns the element not whats inside. I guess the decision it its freaking impossible with CSS hacks (being debunked in IE7.0)

Way2Go css devs

Agh.. this makes me so angry
0
 

Author Comment

by:digitalpacman
ID: 16924839
This is what I exaclty have:

<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3 with<br />multiline</li>
</ul>

<style>
ul {margin: 0px; padding: 0px; }
ul li {display: table-cell; text-align: center; margin: 0px; width:100px; list-style-type: none; height: 50px; float:left; border: 1px solid #000000; padding: 3px;}
</style>

Oh so complicated huh.. ;/ agh so frustrated
0
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16925062
Hi digitalpacman,

Try expressing yourself in a way that doesn't hurt others. >>jagadeesh_motamarri... way to freaking complicated. Uses images? No thanks. I don;t think this is the way u express.


____Jags.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 16929538
Just out of curiosity digitalpacman, does what you propose accually work in IE6 and below?
0
 

Author Comment

by:digitalpacman
ID: 16930506
Yeah it does. Lists are the standard element to use for building easy functioning tools.

I found a way to fix it, although I hate it.

I did research on the vertical-align attribute. It only applies to INLINE elements, and it won't apply to elements with the INLINE display set. Also, since firefox is so junky, you cannot set the height and width of span/div properly on elements that are inside others with positioning set, apparently.

So I had to put an IMG tag in the beginning of each, before the text, (because it is an inline element, an A tag will also work but firefox wont properly size it), set width=0, height = 15, for some UNKNOWN reason. I set the height of the items to 35 and I have to set the image  height to 15 else it becomes larger than the box, GG browser devs, and then I set the vertical-align to middle. This aligns the text to the center of the image.

And setting the height=100% on the image doesnt work cause firefox once again fails to interpret properly and it becomes about double the size of the box cause it gets pushed down. IE renders it fine.

Note: the 100% only doesnt work on firefox on the 2 line elements. For some reason when I do that it become way huge, and I have to set the width to 15px. So its 100% on single line and 15px on double line. Really lame.

So in the end I took the suggestion to use images.
0
 

Author Comment

by:digitalpacman
ID: 16930524
Ending code:

<ul>
<li><img />Single line</li>
<li><img style="height: 15px;" />Multi<br />line</li>
</ul>

<style>
ul {margin: 0px; padding: 0px; }
ul li {text-align: center; margin: 0px; width:100px; list-style-type: none; height: 50px; float:left; border: 1px solid #000000; padding: 3px;}
ul li img {width: 0px; height: 100%; vertical-align: middle;}
</style>
0
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16930588
:-)

Thank You,
____Jags.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 16934757
Whatever makes it work :)

Oh, and GS, I've never really been away you know, just been idle ;)
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16935561
> Whatever makes it work :)
I was thinking the same thing...
I hope you enjoyed your idle time.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question