vertical-align property is not working

Question

0.00/5 (No votes)

See more:

I need to centralized my text horizontally and vertically. For this purpose I have made the following css class.

CSS

.box
{
    height:30px;
    width:80px;
    background-color:yellow;
    display:block;
    float:left;
    text-align:center;
    vertical-align:middle;
    border:1px solid #000;
}

I have used this class in a span tag

This is a text

using this class my text is centered align horizontally but not vertically. What is the problem?

Posted 18-May-11 21:01pm

rashidfarooq

Updated 18-May-11 21:04pm

v3

Add a Solution

Comments

saxenaabhi6 19-May-11 3:03am

vertical align dosent worked for me as well some time...
do it in div tag or use margin from top or bottom or use padding

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abhinav S · Answer 1 · 2011-05-18T21:08:00

Solution 2

vertical-align:text-bottom;
Try setting vertical-align to middle.

Posted 18-May-11 21:08pm

Abhinav S

Comments

rashidfarooq 19-May-11 8:12am

sorry. I typed wrong by mistake. Now, I have update my question. Please answer keeping in view the updated question.

Sergey Alexandrovich Kryukov 19-May-11 13:29pm

Abhinav, I think that's not it. It does not apply to span.
Please see my answer.
--SA

Sergey Alexandrovich Kryukov · Answer 2 · 2011-05-19T07:28:00

Vertical align is a property of the block elements only, mostly used in tables, to arrange text in the table cells in a proper position if the cell is higher (due to data in the same row and difference column(s)) than that is required by the text in a first cell.

[EDIT: answering the follow-up question about table cell]

Test the HTML below:

HTML

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style type="text/css"><!--
         td, table { border: thin solid; }
         td { padding-left: 1em; padding-right: 2em; padding-top: 1em; padding-bottom: 1em;}
         td.top { vertical-align:top; }
         td.middle { vertical-align:middle; }
         td.bottom { vertical-align:bottom; }
      --></style>
   </head>
<body>

<table><tr>
   <td class="top">top</td>
   <td class="middle">middle</td>
   <td class="bottom">bottom</td>
   <td>1<br/>2<br/>3<br/>4<br/>5<br/>6</td>
</tr></table>

</body>
</html>

Probably you don't see the difference on you example, because the vertical size of all cells in a row is the same. You need to have one cell with higher content to see the difference in vertical align style.

I tested it on Seamonkey (Gecko layout engine, same as the one used by Firefox) and IE8; it should work with any non-nonsense browser.

—SA