Centered elements separated by a line break don't align correctly in Firefox

I'm building a login box where all of the content is centered. I have a paragraph of text, two form fields stacked on top of each other, and a button. The form fields have the same width and I'm stacking them simply开发者_开发技巧 by putting a line break (<br />) between them.

Since the whole box has text-align: center; applied to it, you would think that the two form fields would line up exactly, right (one on top of the other with both edges aligned perfectly, since they're the same width)? However, in Firefox, the second form field is shifted over to the right by maybe 1 or 2 pixels.

What causes this? Does the line break itself take up a very small amount of space and therefore throw off the centering? If so, how do I prevent it?

First off, a line break does not create any spacing before or after content around it, so it is not the line break causing spacing issues. A full code sample would help but check the following because this does work and align them perfectly in firefox:

<div style="text-align: center;">
  Some text<br />
  <input type="text" style="width: 150px;"><br />
  <input type="text" style="width: 150px;">
</div>

Check first the document type of your page. Be sure you're declaring it properly (xhtml given that you're closing your line break). Aside from that, given that I assue you line breaks aren't spacing things after them, you should try stripping your code down until you find the cause. You could have a non-breaking space before one of the input boxes ( see http://www.htmlbasictutor.ca/non-breaking-space.htm because i don't know how to make stackoverflow write that character), which would move it, or you could have some css giving one of them a margin. You could have a floated element above them that is encroaching on one and shifting it over.

If all else fails just put them in their own divs instead of using a line break. Wrapping something in a div will have the same effect. Also you can do clear: both; on the div to make sure nothing floated above it is affecting it.