CODEWITHSUNDEEP
htmlcsspositionalignment
rvcam
rvcam

Reputation: 157

Div doesn't align to center with margin:auto

I'm trying to center a div between two others following the second answer to this question. However, it doesn't work and, inspecting my page's elements, I found out the center div's padding is taking up the whole screen's width, as if it were containing the two other divs. I solved that by setting display:inline-block. The padding now is correct, but the div is still not centered. Did I forget something? Is the inline-block option incorrect, since it wasn't present in the answer to which I linked? Code follows.

HTML:

<div class="menu" id="left-menu">
<div class="menu" id="right-menu">
<div class="main-col">
    <canvas id="my-canvas" width="800" height="600"></canvas>
/div>

CSS:

#left-menu
{
float:left;
margin-right:15px; /*won't be needed if the center div is well positioned*/
}
#right-menu
{
float:right;
margin-left:15px; /*won't be needed if the center div is well positioned*/
}
#main-col
{
margin-left: auto;
margin-right: auto;
    display:inline-block;
}

Upvotes: 1

Views: 3742

Answers (1)

potashin
potashin

Reputation: 44581

Change display:inline-block to display:block or add text-align:center to the #main-col container.

Upvotes: 2

Related Questions