On Sun, 13 Jun 2010, John Dick wrote:
>
> I have the following style in my CSS:
>
> body {
> margin: 0;
> padding: 0;
> border: 0;
> }
> #ad {
> width: 275px;
> height: 275px;
> margin-top: 0;
> margin-bottom: auto;
> border: 5px black double;
> background-color: red;
> text-align: center;
> vertical-align: middle;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 275%;
> font-weight: bolder;
> color: blue;
> }
>
> The basic html is:
>
> <div id="ad">
> Our business is tax.
> </div>
>
> Now if I view this in browsers (IE8, FF 3.6.3), the text isn't
> vertically aligned. However, if I put the text within tags (like:
> <p>Our business is tax.</p> the text appears to be vertically
> aligned. Changing the font size to 100% again does not align. What
> is the trick here to get the text horizontally as well as vertically
> to be aligned?
The vertical-align property only applies to inline-level and
table-cell elements; DIV is a block-level element.
If it appears centred at some sizes, that's coincident of the
size, not of vertical alignment. Try increasing the height of the
DIV to see how that affects it.
--
Chris F.A. Johnson, <http://cfajohnson.com>
Author:
Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
