0

In a html page, I would like to vertically center 2 small divs above a bigger one, like below:

+-----------div1-----------+
|                          |
|                          | 
| +-2-+              +-3-+ |
| |   |              |   | |
| +---+              +---+ |
|                          |
|                          |
+--------------------------+

div1 will contains an image of unknown size, so I can't use absolute positionning.

I have tried many combinations of css attributes, without success.

Any idea?

3
  • 2 small divs above a bigger one : above or inside?
    – Abhitalks
    Dec 10, 2013 at 13:43
  • You can use absolute positioning.
    – Vucko
    Dec 10, 2013 at 13:48
  • Thanks Vucko. I thought absolute positionning required pixels only. But as I know the height of div2 and div3, you're right, I can use absolute positionning.
    – Laurent D.
    Dec 10, 2013 at 14:24

5 Answers 5

1

If your inside div's (div2 and div3) have got a static width and height, you could use this solution:

HTML

<div id="wrapper">
    <img src="https://www.google.nl/images/srpr/logo11w.png" alt="text" />
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS

#wrapper{
    background-color: green;
    width: 100%;
    float: left;
    position: relative;
}
#left,
#right{
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    margin-top: -10px;
    background-color: red;
}
#left{
    left: 20px;
}
#right{   
    right: 20px;
}    

JsFiddle: http://jsfiddle.net/aPJ8u/7/

7
  • I was just about to post the exact same answer
    – J2D8T
    Dec 10, 2013 at 13:51
  • To improve upon this answer, you can now simply use calc() to solve the problem that top and margin-top are solving here. Fiddle
    – randak
    Dec 10, 2013 at 13:57
  • note: calc() is css3 which issn't supported by all browsers (Older versions of IE)
    – Jop
    Dec 10, 2013 at 13:59
  • OP says I can't use absolute positionning. and your css has position: absolute;...please explain!!
    – NoobEditor
    Dec 10, 2013 at 14:09
  • OP says that he can't use absolute positioning because div1 contains an image of a unknown height. My solution shows that you CAN use absolute positioning regardless of the height of the image inside div1. I think my jsfiddle makes my point...
    – Jop
    Dec 10, 2013 at 14:14
0

Try this:

http://jsfiddle.net/g8psN/2/

Addition for .main

display: table-cell;
vertical-align: middle;

Then float the child elements left and right.

2
  • this won't work when you add an image inside the main div like so: jsfiddle.net/g8psN/3
    – Jop
    Dec 10, 2013 at 14:28
  • "div1 will contains an image"
    – Jop
    Dec 10, 2013 at 14:37
0

The simplest way to do this without having to worry about the consequences of absolute positioning is to use floats. The method of vertical alignment I am proposing requires you to know the heights of the vertically aligned elements. If this is not possible, we can figure out another solution.

HTML

Simply place the elements inside of the wrapping div.

<div id="test1">
    <div id="test2"></div>
    <div id="test3"></div>
</div>

CSS

The width and height of #test1 do not need to be set. Neither do the background-colors.

#test1 {
    width: 500px;
    height: 500px;
    background-color: yellow;
}

#test2 {
    float: left;
}

#test3 {
    float: right;
}

#test2, #test3 {
    margin-top: calc(50% - 25px);    
    width: 50px;
    height: 50px;
    background-color: red;
}

JSFiddle

0

@Laurent Use display:table and display:table-cell: http://jsfiddle.net/nLdU5/

0

i guess m late in answering...here is another solution DEMO

CSS

    .outer {
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    width: 400px;
    height: 500px;
    /**change this as per your need */
    padding: 20px;
    background-color: #DDD;
}
.div1 {
    background-color: #FFCCCC;
    padding: 10px;
}
.div2 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
}
.div3 {
    background-color: #CCCCFF;
    padding: 20px;
}

HTML

 <div class="outer">
    <div class="defaultdiv div1">div on left
    </div>
    <div class="defaultdiv div2"></div>
    <div class="defaultdiv div3">div on right
    </div>
</div>
3
  • Please reformat your CSS. You can do it automatically with the "Tidy Up" option in JSFiddle.
    – randak
    Dec 10, 2013 at 14:05
  • was doing that only mate...if only u could have waited for one more minute!! :)
    – NoobEditor
    Dec 10, 2013 at 14:08
  • 1
    Muuuch better. Although, this really doesn't align in the middle. You need to take into account the height of the thing you're centering.
    – randak
    Dec 10, 2013 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.