[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7743
  • Last Modified:

CSS Vertical Align, how to?

I have an item that is 200x100 pixels. Text inside. I want the text to be dead center. How do I do this?

0
digitalpacman
Asked:
digitalpacman
  • 7
  • 6
  • 5
  • +2
1 Solution
 
jagadeesh_motamarriCommented:
style="text-align:center;"
0
 
jagadeesh_motamarriCommented:
...if thatz not the solution , lemme know whatz the item and what do u have so far
0
 
digitalpacmanAuthor Commented:
I want vertical align not horizontal align

this is it

<li style="height: 200px; width: 200px">sfsaf</li>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
GrandSchtroumpfCommented:
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
 
mreuringCommented:
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
 
radnorCommented:
<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
 
radnorCommented:
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
 
mreuringCommented:
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
 
radnorCommented:
How much text?  Single line?  Multi?
0
 
jagadeesh_motamarriCommented:
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
 
GrandSchtroumpfCommented:
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
 
jagadeesh_motamarriCommented:
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
 
GrandSchtroumpfCommented:
> 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
 
jagadeesh_motamarriCommented:
I really appreciate your time GrandSchtroumpf.

Thank You,
____Jags.
0
 
GrandSchtroumpfCommented:
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
 
digitalpacmanAuthor Commented:
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
 
digitalpacmanAuthor Commented:
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
 
digitalpacmanAuthor Commented:
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
 
jagadeesh_motamarriCommented:
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
 
mreuringCommented:
Just out of curiosity digitalpacman, does what you propose accually work in IE6 and below?
0
 
digitalpacmanAuthor Commented:
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
 
digitalpacmanAuthor Commented:
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
 
jagadeesh_motamarriCommented:
:-)

Thank You,
____Jags.
0
 
mreuringCommented:
Whatever makes it work :)

Oh, and GS, I've never really been away you know, just been idle ;)
0
 
GrandSchtroumpfCommented:
> Whatever makes it work :)
I was thinking the same thing...
I hope you enjoyed your idle time.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 7
  • 6
  • 5
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now