Search code examples
htmlcsscentertext-align

How do I center a DIV with no parent?

I want to center my form in the center of teh horizontal row it is in. I thought this would be as simple as

#control {
    text-align: center;
}

The element I want to center is

<div id="control" class="btn">
    <div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>
    <span>Start</span> 
</div>

However, the element is still not being centered -- https://jsfiddle.net/xwdnvcy5/58/ . I'm not getting something really obvious, but I can't tell what it is.

Solution

  • This one is not very intuitive, but try setting the margin to 0 auto.

    #control {
    margin: 0 auto;
}