Solved

How to vertically center an element?

Posted on 2011-03-17
5
236 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

705 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