CODEWITHSUNDEEP
htmlcss
chuckd
chuckd

Reputation: 14600

Trying to center a div tag within a section tag

I can't seem to center my div tag within a section tag. I can get it centered from left to right but not top and bottom in the center of the section tag. If I give a margin-top:xxpx then it moves the section tag down and exposes it (not good!)

Here is my css

body 
{
background-color: yellow;
margin: 0;
}

header > * {
margin: 0;
float: left;
}

header
{
background-color: white ;
width: 100%;
height: 40px;
}

/*header > input {
margin: 10px 20px 0px 10px;
}*/

#toptext
{
margin: 10px 5px 0px 10px;
width: 245px;
}

article > * {
margin: 0;
}

article
{
background-color: red;
}

#search {
background-color: #a6dbed;
height: 500px;
}

#middlesearch {
background-color: grey;
width: 700px;
margin: 0 auto;   
}

#mostdesired 
{
background-color: #c7d1d6;
height: 200px;
}

section h2 {
margin:0;
}

.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 1.3em;
margin: 0px 20px 0px 50px;
margin-top: 7px;
}

.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}

Here is my html

<body>
    <header>
        <p class="site-title">@Html.ActionLink("Site", "Index", "Home")</p>
        <input id="toptext" type="text" />
    </header>
    <article>
        <section id="search">
            <div id="middlesearch">
                <h2>Search Here</h2>@RenderBody()
            </div>
        </section>
        <section id="mostdesired" ><h2>This is the most section</h2></section>
    </article>
</body>

Upvotes: 0

Views: 84

Answers (5)

Andrea B
Andrea B

Reputation: 36

Vertically aligning with CSS is notoriously tricky.

Change the CSS to

#search {
    position: relative;
    background-color: #a6dbed;
    height: 500px;
}

#middlesearch {
    position: absolute;
    background-color: grey;
    width: 700px;

    top: 50%;
    left: 50%;
    margin-left: -350px; /* half the width */
}

and add one line of JQuery to up the div to be correctly centered 

$('#middlesearch').css("margin-top",-$('#middlesearch').height()/2)

this line can be avoided if you decide to explicitly specify the height of the div at which point you can simply define the top margin in the CSS.

This avoids having to use tables.

Upvotes: 2

Mike
Mike

Reputation: 1

You have to do a little work for block level elements, refer to these examples

http://phrogz.net/CSS/vertical-align/ http://www.vanseodesign.com/css/vertical-centering/

Upvotes: 0

Jason
Jason

Reputation: 4159

http://www.vanseodesign.com/css/vertical-centering/

Unfortunately, CSS doesn't make it to easy, but it is possible. Since the div height is dynamic, I would recommend the CSS table method. Yes, a total hack, but it does work.

Upvotes: 0

carlitoa
carlitoa

Reputation: 1

The CSS declaration for header isn't closed on line 20

Upvotes: 0

Abe Hendlish
Abe Hendlish

Reputation: 727

#middlesearch {
    display:inline-block;
    line-height:500px;
    vertical-align:middle;
}

Upvotes: -1

Related Questions