Solved

CSS Vertical Align, how to?

Posted on 2006-06-15
25
7,728 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
Comment Utility
style="text-align:center;"
0
 
LVL 10

Expert Comment

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

Author Comment

by:digitalpacman
Comment Utility
I want vertical align not horizontal align

this is it

<li style="height: 200px; width: 200px">sfsaf</li>
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
Comment Utility
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
Comment Utility
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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
How much text?  Single line?  Multi?
0
 
LVL 10

Accepted Solution

by:
jagadeesh_motamarri earned 250 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 30

Expert Comment

by:GrandSchtroumpf
Comment Utility
> 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
Comment Utility
I really appreciate your time GrandSchtroumpf.

Thank You,
____Jags.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Just out of curiosity digitalpacman, does what you propose accually work in IE6 and below?
0
 

Author Comment

by:digitalpacman
Comment Utility
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
Comment Utility
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
Comment Utility
:-)

Thank You,
____Jags.
0
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
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
Comment Utility
> Whatever makes it work :)
I was thinking the same thing...
I hope you enjoyed your idle time.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS for Mobile Device/iPad 13 71
spacing 5 24
Inline input fields - Contact Form 7 5 20
How can I expand text with explaination 5 18
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now