Solved

CSS Vertical Align, how to?

Posted on 2006-06-15
25
7,735 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Suggested Solutions

Title # Comments Views Activity
100% tall div not scrollable on iPhone 3 36
TypeError jquery issues with site - CSS conflicts 3 46
Display Flex does not Wrap Items 2 46
center text in div with CSS3 2 29
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

732 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