barryl — 2012-06-01T17:34:29-04:00 — #1
I am placing a <span> within a <div>. The div text is 12px, and the span text is 10px bold. I would like to middle-align the span text with the div text. I tried bottom-padding the span text, but that didn't work. Any suggestions for this newbie?
ralphm — 2012-06-01T18:21:13-04:00 — #2
A span is an "inline" element, meaning that it's designed to sit within a line of text etc. So things like padding don't work quite the same. One way to deal with this is to give the span display: block; which will make it behave like a block level element. Another option is to use a <p> instead and give it a special class.
Feel free to post your code and some indication of how you want it to appear, and we can help further.
barryl — 2012-06-01T19:09:58-04:00 — #3
<div>text text text text text text.<span>060112</span></div> is the code. The <div> is 12 px, and the <span> is 10px. I'm attempting to vertical-align the smaller-text span with the larger-text div. It only needs to move up 1px.
Thanks for the quick response, and I hope this is the info y'all need.
stevie_d — 2012-06-01T19:10:38-04:00 — #4
I'm assuming you want to middle-align it vertically? If so, put
vertical-align:middle; on the <span>, and that should do the trick.
barryl — 2012-06-01T21:33:36-04:00 — #5
Thanks, Stevie! It worked!