asked on

How to vertically center an element?

Hi!
I try to place three buttons on my page. Two of them should be placed above each other, the third should be placed besides the other buttons, but vertically centered. Using a table, I could do it like this:

<table>
    <tr>
        <td><input type="button" value="button1"/></td>
        <td rowspan="2"><input type="button" value="button3"/></td>
    </tr>
    <tr>
        <td><input type="button" value="button2"/></td>
    </tr>
</table>

Open in new window

However, I want to achieve the same using CSS instead of a table. I do not want to assign a fixed height to the buttons. (With a fixed height, the solution would be easy.)
How can I solve this problem?

soujanya_g

Hi

Try to give valign prperty to <td> tag and assign valign="middle"

chschroe

ASKER

The solution with tables works like I have posted it. I am looking for a solution without tables, i.e. using CSS instead of tables.

Gurvinder Pal Singh

Try this one
<div style="height:100px;border:1px solid red;">
<div style="height:20px;border:1px solid red;margin-top:40px">
</div>
</div>

ASKER CERTIFIED SOLUTION

h4mi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chschroe

ASKER

@gruvinder: As I pointed out in my original question I do not want to assign a fixed height to the elements.

@h4mi: Ok, by using "display: table-cell" I can achieve the desired result. The work-around described in the linked article is not necessary for me because the page will never be used with IE.
The question is: Is a div with "display: table-cell" better than a native html table? Or do we get back to table-based layout disguised in "display: table-cell" divs? If anybody cares: I found this link where exactly this question is discussed.