Question

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

Answer 1

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.