CODEWITHSUNDEEP
htmlcss
user2819346
user2819346

Reputation:

Vertical Auto Margin within a Div

I'm now trying another strange and not working thing: the vertical auto alignment of a child div.

I would like the content to be vertically centered within the panel, because the panel have a height in % that fits the window size, it's really important for me to have a strict alignment.

All right, here's my code: JSFiddle

HTML

<div id="panel">
    <div id="content">
    </div>
</div>

CSS

html, body
{
    height: 100%;
    background-color: #273034;
    margin: 0;
}

#panel
{
    height: 100%;
    width: 380px;
    margin: auto;
    background-color: rgba(255,255,255,0.3);
}

#content
{
    height: 100px;
    width: auto;
    background-color: rgba(117,169,56,0.9);
}

Why a so simple thing doesn't work?

Hope someone could help me, I've tried these solutions: margin : auto not working vertically? but it actually didn't make the trick

Upvotes: 0

Views: 153

Answers (1)

avrahamcool
avrahamcool

Reputation: 14094

Here is a simple Solution for vertical aligning, using Pure CSS without fixing any top-margin, top-padding. so its totally responcive.

See this Working Fiddle

HTML: (Same)

<div id="panel">
    <div id="content">
    </div>
</div>

CSS:

html, body
{
    height: 100%;
    background-color: #273034;
    margin: 0;
}

#panel
{
    height: 100%;
    width: 380px;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.3);
}

/*this is new*/
#panel:before
{
    content: '';
    height: 100%;
    margin-left: -5px;
    vertical-align: middle;
    display: inline-block;
}

#content
{
    vertical-align: middle;     /*this is new*/
    display: inline-block;    /*this is new*/
    height: 100px;
    width: 100%;    /*this is new*/
    background-color: rgba(117,169,56,0.9);
}

Upvotes: 1

Related Questions