Solved

How to vertically center an element?

Posted on 2011-03-17
5
232 Views
Last Modified: 2012-08-14
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?
0
Comment
Question by:chschroe
5 Comments
 
LVL 5

Expert Comment

by:soujanya_g
ID: 35154708
Hi

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

0
 

Author Comment

by:chschroe
ID: 35154831
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.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35154905
Try this one
<div style="height:100px;border:1px solid red;">
     <div style="height:20px;border:1px solid red;margin-top:40px">
     </div>
</div>
0
 
LVL 5

Accepted Solution

by:
h4mi earned 250 total points
ID: 35154959
Gurvinders code works but only because it's manually set.

For true vertical align, see this link: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
0
 

Author Comment

by:chschroe
ID: 35158848
@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.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
edit .asp files 5 31
Can't get second accordion on page to work 2 13
message Alert on an empty search 10 23
html / css issue / div issue. stuck, help needed 2 16
This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question