02-21-2015, 01:29 PM
(02-21-2015, 12:10 PM)Kosheh Wrote: Yesterday, I was working on a few additional touch-ups for one of our clients (which is, in a humorous turn of events, is my former employer) and there was a request to add an additional sidebar widget for users to click on. So I make it really simple and so I can halfassedly add additional properties to it, I put it in a <span> block. Adjusting the font color worked. Adding the font size worked. Hell, even the height between each line of text worked. But for the life of me I couldn't figure out why the block of text wouldn't properly align to the center (the text was fine, but it was off-center) Puzzled as heck, I asked my boss. "What about a <div>?" he said. I felt like a moron as I trudged back to my desk and replaced the "span" with "div" and lo and behold, it worked.
Set your new div to "display: inline-block;" and you should be good to go. Spans are inline elements and divs are block-level. By default, inline elements only take up enough space to display the content, which is why your centering wasn't working. On the other hand, divs take up all available space on their line by default but you can't put things next to them. An inline-block div combines the two, letting you give it a fixed width/height while still letting other elements flow around it.
I have no specific examples for this thread but I can absolutely confirm that fixing things in web design does often break other things. Like, I'm sure the left-aligned ads that I still haven't gotten around to fixing were caused by fixing something else in the header template...