CODEWITHSUNDEEP
htmlcssvertical-alignment
Peter Berg
Peter Berg

Reputation: 6206

Vertically aligning a div

I've looked at several other posts on vertically aligning divs but the solutions I'm finding don't seem to be working for my use case. I'd like to vertically center the div with the class "I-want-to-center-this-while-ignoring-the-other-two-divs".

I have a very simple example on jsfiddle here.

Can anyone help me out with this?

Code:

HTML:

   <div id="container">
        <div class="I-want-to-ignore-this"></div>
        <div class="I-want-to-ignore-this float-right"></div>
        <div class="I-want-to-center-this-while-ignoring-the-other-two-divs"></div>
    </div>

CSS:

#container {

    height: 300px;
    width: 100%;
    border: 2px solid black;
}

.I-want-to-ignore-this{

    float:left;
    height: 75px;
    width: 100px;
    border: 2px solid grey;
}

.float-right {
    float: right;
}

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;

    margin: auto;
    vertical-align: center;
}

Upvotes: 1

Views: 130

Answers (4)

NiRUS
NiRUS

Reputation: 4261

.I-want-to-center-this-while-ignoring-the-other-two-divs{
    position:relative;
    top:25%;
    border: 2px solid green; 
    height: 150px;
    width: 150px;
    margin: auto;

}

check this: JSFIDDLE

Your container is 300px height and the div you want to center is 150px. By applying simple math to center the div you need pad 50px above and 50px below to center the div. so top:25% would do that.

Just add position and top property to your css as shown above

Upvotes: 0

Cthulhu
Cthulhu

Reputation: 1372

Add this to center div css:

position:absolute;
top:50%;
right:50%;
margin-top:-75px;
margin-right:-75px;

Remove margin from there

Add this to container:

position:relative;

Edit: JSFiddle

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

I would simply add a top margin to your center div:

.I-want-to-center-this-while-ignoring-the-other-two-divs {
    border: 2px solid green;
    height: 150px;
    width: 150px;
    margin: auto;
    margin-top: 73px;
}

Since you have a fixed height on your parent container and your div has known height, this is the simplest way of doing it.

The math is: ( parent-height - (child-height+top-border+bottom-border) ) / 2

http://jsfiddle.net/audetwebdesign/7SfKW/10/

Upvotes: 1

Devon Bernard
Devon Bernard

Reputation: 2300

In the comment section you specified that your container will be fixed height. The simplest solution is to just make the position of the center div relative and move it down toward the center of the box with the "top" CSS attribute. 

.I-want-to-center-this-while-ignoring-the-other-two-divs{

    border: 2px solid green; 
    height: 150px;
    width: 150px;
    position:relative;
    top:70px;
    margin: auto;
    vertical-align: center;
}

Here is the updated JSFiddle.

(NOTE: If your container changes size you would need to update the variable; but being fixed this solution should work fine)

Upvotes: 1

Related Questions