CSS - Vertical-align:center (text Problems)

I have some text in a DIV that is updated dynamically with removeChild() and appendChild(). I've tried numerous combinations but I can't seem to get it to work correctly.

CSS Code:
Original - CSS Code div.chatlayer { position: absolute; top: -50px; left: 50px; border: 1px solid black; -moz-border-radius: 10px; padding: 5px; background-color: white; min-width: 100px; width: auto; text-align: center; visibility: hidden; }

  

 div.chatlayer {


   position:             absolute;


   top:                  -50px;


   left:                 50px;


   border:               1px solid black;


   -moz-border-radius:   10px;


   padding:              5px;


   background-color:     white;


   min-width:            100px;


   width:                auto;


   text-align:           center;


   visibility:           hidden;


 } 

I was having some trouble centering my layout in Firefox. It looked fine in IE6 (yes... it's a pain to work in, but it's the nature of the beast when doing internal intranet stuff) when I simply used "text-align: center;" but the layout wouldn't center until I added "text-align: -moz-center;" under that (in the body style).

Is this an acceptable way of doing things? Is this a flaw in Firefox or is it more likely that I'm not doing things right? (yes I know I haven't posted code, this was more a high level question of when/if "text-align: -moz-center;" should be used).

I have a <p> tag with text inside of it with a height of 20px and width of 100px. Horizontal text alignment works fine within in, but I want the text to sit in the middle of the tag and I just can't do it. It defaults to sitting at the top. I try vertical-align: middle, but that doesn't work. None of the the vertical aligns do anything in fact

How do I align an actual text input box to the center of the screen using css?

OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something.

Here's my css:

Code:

h1 {
	font-family:arial black;
	color:#666666;
	font-size:12pt;
	margin: 0; 
	padding: 2px 0;
	text-align:center;
}


.footer_header_link{
	text-align:center;
    font-family:arial black;
	color:#666666;
	font-size:12pt;
	margin: 0;
	padding: 2px 0;
	}

You can see a sample testhere.

Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link"

Any ideas?
thanks

Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox?

I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously.

Thanks.

I am relatively new to using div tags - transitioning from table tag to organize pages. I want the checkboxes to be aligned to the left inside a container that is centered in the body. Currently it is all aligned to the left for some reason. The body tag has no text-align or any other css rule manually set.

Code:

<div style="display: block;text-align;left;float: center;margin-left: auto;margin-right: auto; border: .1em solid;width:400px; position: relative; clear:both;">
<div style="display: block;text-align;left;float: left;margin-left: auto;margin-right: auto; border: .1em solid; position: relative; clear:both;">
<INPUT TYPE="CHECKBOX" NAME="cartoon">cartoon<BR>
<INPUT TYPE="CHECKBOX" NAME="comicstrips">comicstrips<BR>
</div>
</div>

thanks.

Firefox: all looks fine except the checkbox container does not appear to be inside the surrounding container - the outer container div appears as a line (it's border) at the top of the inside div with the checkboxes

IE8: on a test page with nothing else - appears as Firefox. In my page with several other divs it appears with one container inside another fine, but the main container is not centered.

I have looked at several tutorials about float etc but...wits end...
thanks.

Never had a reason to use this property...not sure I'm understanding it correctly. My intent was to have the the nav links sit on the baseline of the 50px height container.

Any help would be greatly appreciated.

Thanks!

.css

#toplinks { float:left; width:580px; background-color:#fffff; height: 50px; text-align:right; vertical-align:bottom;}

html
<div id="toplinks"> Home | Preferences | Help | Site Map | Contact Us | Log Out</div>

I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code

Code:

.globalNav, .globalNav td {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height:28px;
	border-bottom: 1px solid #94AEC1;
	border-collapse: collapse;
}

.globalDiv{
	color:#fff;
	width:100%;
	height:28px;
	background:#94AEC1 url(../images/grad_bar.gif);
	background-color:#94AEC1;
	margin:0px;
	padding: 0px 0px 0px 10px;
	overflow:hidden;
}
.globalDiv a{
	font-size:10pt;
	color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
	text-decoration:underline;
}

.globalDiv a:hover{
	text-decoration:none;
}

Thanks

Hi folks, don't usually post in the CSS forum here, but in the php forum I have got great help so give it a go. Basically I need to know how to center two divs on a page which themselves have float:left attribute.

When I set text-align:center on the body a couple of other divs aligned perfectly so I did not have to worry about different res's. But I need these two divs (leftnav and content) next to each other and acheived this by setting the float:left attribute. The CSS code is below, I hope you can help, i have tried but these two divs in one outer div (without any float set) but didn't work.

Code:

body
{
	font-family: "Lucida Sans";
	font-size: 12px;
	margin: 0px 0px 10px;
	border-top: 0px none #000000;
	border-right: 0px none #000000;
	border-bottom: 5px none #000000;
	border-left: 0px none #000000;
	scrollbar-arrow-color: #D20000;
	scrollbar-3dlight-color: #4F4F82;
	scrollbar-darkshadow-color: #4F4F82;
	scrollbar-face-color: #f4f4f0;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #d0d0d0;
	scrollbar-track-color: #ffffff;
	text-align: center;
	display: block;
}


.leftnav {
	float: left;
	color: #000000;
	font-size: 12px;
	font-family: "Trebuchet MS";
	border-top: 1px solid #000000;
	border-right: 1px none #000000;
	border-bottom: 1px none #000000;
	border-left: 1px none #000000;
	padding: 0px;
	white-space: nowrap;
	width: 220px;
	margin: 10px 0px 0px 10px;
	clear: both;
	text-align: left;
}

.content {
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	float: left;
	white-space: normal;
	margin-top: 10px;
	margin-left: 0px;
	margin-bottom: 10px;
	font-family: "Trebuchet MS";
	font-size: 13px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 1000px;
	margin-right: 0%;
	list-style-type: none;
	text-align: left;

}

Thanks very much.

i have a parent container ('footer') where i have 2 child elements. the first ('feeds-techs') is floated right, while the second ('footer_text') is displayed inline to get its top border to display properly. 'feeds-techs' is taller that 'footer_text'.

what i want is for the container to expand to the height of 'feeds-techs'. i accomplished this using the ":after" pseudo-element. i also want the inline element to rest at the bottom of the container (so that the bottoms of the 2 child elements are even).

first, i tried to set the parent container to "vertical-align: bottom;" but to no avail. then, i attempted to use "clear: both;" on 'footer_text', but that didn't work in firefox (i'm assuming because it's an inline element) - it also didn't suit the display i wanted since 'footer_text" was then resting below 'feeds-techs'. i also attempted to use the ":before" pseudo-element on 'footer_text' and setting the height to 100%. still didn't work. then i tried to set the 'footer_text' to "margin-top: 100%;" - still nothing (actually, this caused the top border of 'footer_text' to disappear in ie -- ie sucks sooo bad >:-{ ).

i'm wanting to steer clear of [x]html hacks, like a "<div class='clearboth'>&nbsp;</div>", because that's not very pure css and it doesn't suit my semi-obsessive-compulsive disorder. ;-)

i'm sure there's a solution out there -- i'll be surprised if you can't solve this problem using pure css.

if you would like to see the page in question and my code/stylesheets:
page in question (view source for my xhtml)
stylesheet (if, for some really odd reason, you need to see my other stylesheets, you'll see their location in the source of my xhtml - you should know where to look)

any ideas?

Hi all,
I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified.

How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments.

Thanks in Advance.

- John

Hi,

I'm using XHTML & CSS (strict dtd) and using one large table to format my pages.

Within the table I have different alignments and any other sort of thing that you would find in a table.

W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape??

Everything within the table is great, but the table itself is not centered.

I'm using CSS in the following manner to try to center it currently

Code:

<!-- All the doctype stuff and head tags go here...-->

<body style="text-align:center">

<!-- Rest of the document -->

It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape.

As you may know "<center>" is not defined in the XHTML strict dtd so that options out.


Thanks for any help or suggestions,

Kalan

Hi,

I am trying to use the vertical-align property to make some text appear in the middle of a div (set float:left). However it is not working. Following is some sample code I have done for testing: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>ccc</title>
  <style>

   div{

    width:16.7em;
    height:6.8em;
    border:1px solid black;
    vertical-align:middle;
    float:left;
   }

  </style>

 </head>

 <body>

  <div>hello</div>

 </body>
</html>

Is this possible?

Thanks and Regards,
Sim085

for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code,
#outer{
position: relative;
float: left;
width: 900px;
height: 200px;
}
#outer .inner{
position: relative;
float: left;
width: 500px;
height: 200px;
vertical-align: bottom;
}

however the content of the inner div is starting at its default location which is top left of the inner div

instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases.

please advice.

thanks.