Member Avatar for tqmd1

Sir I am using these codes

<html>
<head>
<title>Center dive</title>

<style type="text/css">

html body{
margin:0 atuo;
margin-top:20px;
}

#main {
    margin: 0 auto;
    background-color: lightgreen;
    overflow: auto;
    text-align:center;
    height:400px;
    width:400px;
    color:blue;
}
#box {
    display:table-cell;
    vertical-align: middle height: 200px;
    width: 200px;
    background-color:#FFA500;
    border:1px solid silver;
    color:blue;
    font-weight:bolder;
    font-size:24px;
    padding:10px;
    margin:0 auto;
}
</style>

</head>
<body>
<div id="main">
    <div id="box">This box </br>must be 

Centered</br>Horizontaly</br>and</br>Vertically</br> in </br>Main Div</div>
</div>

</body>
</html>

[IMG]http://i57.tinypic.com/2yvktck.png[/IMG]

How to Display box in the center of main div? (Horizontaly and Vertically)

Please help

  • 3 Contributors
  • 2 Replies
  • 218 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Recommended Answers

All 2 Replies

Member Avatar for DaveAmour

Is this any help?

` <style type="text/css">
html body
{
margin: 0 atuo;
margin-top: 20px;
}

    #main
    {
        margin: 0 auto;
        background-color: lightgreen;
        overflow: auto;
        text-align: center;
        height: 300px;
        width: 300px;
        color: blue;
        display: table;
        padding: 40px;
    }

    #box
    {
        display: table-cell;
        vertical-align: middle;
        height: 200px;
        border: 1px solid #000;
        width: 200px;
        background-color: #FFA500;
        border: 1px solid silver;
        color: blue;
        font-weight: bolder;
        font-size: 24px;
        padding: 30px;
        margin: 0 auto;
    }
</style>`
Member Avatar for gentlemedia

Since you have all width and height values, it's easy to do some little math and position #box with some top and left margins in the middle of #main. No need for display: table, display: table-cell and vertical-align: middle

#main {
    margin: 0 auto;
    background-color: lightgreen;
    overflow: auto;
    height:400px;
    width:400px;
}

#box {
    height: 200px;
    width: 200px;
    background-color:#FFA500;
    margin: 100px auto 0;
}

See demo : http://cssdeck.com/labs/4w13hzhx

But setting all this fixed heights makes everything pretty inflexible, therefore the content in #box needs to fit perfectly and can't extend unless you change the height and the margins in your CSS of #main and #box. Too much maintanance.

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.