This is a problem that occurs a lot, and I usually do solve it in a variety of ways that don't work for another method. I was wondering if there was a universal method to center objects:
<div>
<span>content</span>
<span> content</span>
<span>content </span>
<span> content </span>
<span>content</span>
<span>content</span>
</div>
The methods I've tried are margin-left:auto; margin-right:auto; which doesn't seem to work with this. I've tried margin-left:Xpx; . One method that worked for a prior project was display:inline-block and display:table-cell but at other times those refuse to work. I tried applying those "fixes" to both the divs and spans.
Another problem is that I can't seem to style the margin-top and margin-bottom in this instance at all.
To shorten the post: I want to center the div and make the spans have a margin-top or bottom. What am I doing wrong and can someone explain the conceptual side to it? Thank you
to centre a div, which is display:block by default, you need to give it a width, then "margin:0 auto"
as for the spans; they are by default display:inline, which doesn't accept margines as far as I'm aware. you could use padding instead. depends on what you're trying to do, really.
display:inline-block only works on a few browsers.