CODEWITHSUNDEEP
csshtml
Johnbabu Koppolu
Johnbabu Koppolu

Reputation: 3252

Place the contents of a div at the center

I have two select boxes and a button panel in between to move the options to and fro. Right now it looks like the first image below, I want to place the buttons vertically aligned at center with the list boxes like the second image below

enter image description here

JSFiddle here

Any help/pointers would be great.

Upvotes: 1

Views: 84

Answers (3)

kai-o-pele
kai-o-pele

Reputation: 141

You can use css tables. At first, you need this scaffolding:

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

[...]

<div class="table">
    <div class="row">
        <div class="cell">Lorem [...]</div>
        [...]
    </div>
</div>

Next, the cell's vertical arrangement is determined by vertical-align: top|bottom|middle|baseline. Under the hood: Cells that have a lower height than its row, receive a top or bottom padding automatically. With that, a cell and a row are equal to one.

Look at your code that is updated: http://jsfiddle.net/Fq93w/21/. And here is the workaround for IE <= 7:

#rightListDiv, #controlPanel, #LeftListDiv {
    display: inline;
    zoom: 1;
}

Upvotes: 3

Shreedhar
Shreedhar

Reputation: 5640

Probably wrapping evrything inside one div and giving margin-top in % for controlPanel div, may work for you.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382806

Add margin-top with value as per your needs, see updated fiddle:

http://jsfiddle.net/Fq93w/11/

Upvotes: 2

Related Questions