Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to vertically center an element?

Posted on 2011-03-17
5
Medium Priority
?
243 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:Gurvinder Pal Singh
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 1000 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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

607 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