CODEWITHSUNDEEP
htmlcss
Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Aligning Span Above Input Centering Issues

I am attempting to center a row of spans above their corresponding input boxes. Both the span and the input have width set to 150px, however the spans render about 2px smaller than the inputs in FF & IE. This causes all of the labels to shift left of their intended placement and the shift becomes more drastic with each new label. It may be important to note that I have changed the display property of the spans to: inline-block. Is there a better way to fix this than adding +4px to the width of the span?

I have an example here: http://jsfiddle.net/kDcKB/5/

Can anyone help?

Upvotes: 0

Views: 169

Answers (1)

easwee
easwee

Reputation: 15915

That's because of the box model. The border + width does not sum up the same way on each element.

Try this: http://jsfiddle.net/easwee/kDcKB/8/

or change the box-sizing property for .txtTest

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Upvotes: 1

Related Questions