...

View Full Version : span: how to align its text vertically?



hello20109876
05-06-2006, 01:57 PM
here is code:

<span style="width:200; height:50; text-align:center; background-color:00ff00;">Hello</span>

I want to align its text - i.e. Hello - verically in middle, could u help?

thx


:confused:
:(
:mad:

coothead
05-06-2006, 03:37 PM
Hi there hello20109876,

you are in the wrong forum.
you are using the wrong element - span.
you have not defined the width and height units.
you have not 'hashed the hex value.


So try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#foo {
width:200px;
line-height:50px;
text-align:center;
background-color:#0f0;
color:#000;
}
-->
</style>

</head>
<body>

<div id="foo">Hello</div>

</body>
</html>


coothead

hello20109876
05-06-2006, 07:08 PM
:confused:

1)if wrong forum, which one should I be?

2)I use correct element - span.
div has line-break (br) before and after - it is not suitable for my case.

my question is:
span: how to align its text vertically?

NOT
div: how to align its text vertically?

You are trying to change my question.

modify:
But your code is valid for span also !!!!!!!!!!!!!!!!!


:D
.

vwphillips
05-06-2006, 07:16 PM
you need a HTML forum or book

<SPAN> is an inline element.
<DIV> is a block element



Syntax <SPAN>...</SPAN>
Attributes common attributes

Contents Inline elements
Contained in Inline elements, block-level elements

The SPAN element is a generic inline container. SPAN carries no structural meaning itself, but it can be used to provide extra structure through its LANG, DIR, CLASS, and ID attributes. Style sheets are often used to suggest a presentation for a given class or ID.

SPAN should only be used where no other HTML inline element provides a suitable meaning. If a presentation such as bold or italic text would be suitable on visual browsers, authors may prefer to use an appropriate font style element. For example:

<P><SPAN LANG=fr>La Révolution Tranquille</SPAN> shook Quebec in the early 1960's.
<P><I LANG=fr>La Révolution Tranquille</I> shook Quebec in the early 1960's.
These examples are identical in meaning, but the second example uses the I element to suggest italic text.

DIV is a block-level equivalent of SPAN for containing block-level elements such as P and TABLE.

More Information
SPAN in W3C HTML 4.0 Recommendation




Syntax <DIV>...</DIV>
Attributes ALIGN=[ left | center | right | justify ] (horizontal alignment)
common attributes

Contents Inline elements, block-level elements
Contained in APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.

The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.

The deprecated ALIGN attribute suggests the horizontal alignment for the content of the division on visual browsers. Possible values are left, right, center, and justify. <CENTER> is a slightly better-supported alias for <DIV ALIGN=center>, though both methods of centering are deprecated in favor of style sheets, which provide greater flexibility in suggesting alignment.

SPAN is a text-level equivalent of DIV for use within paragraphs and inline elements.

More Information
DIV in W3C HTML 4.0 Recommendation
DIV in W3C HTML 3.2 Recommendation
DIV in WDG HTML 3.2 Reference
DIV in Learning HTML 3.2 by Examples

coothead
05-06-2006, 07:36 PM
Hi there hello20109876,

if wrong forum, which one should I be?
Why, when have a basic CSS problem, would you look for a javascript solution. :eek:


my question is:
span: how to align its text vertically?


Well, you could set it to display:block; but then, of course, you would have a div. :D

You are trying to change my question.
No, I was attempting to solve your problem. :D

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum