Solved

How to vertically center an element?

Posted on 2011-03-17
5
229 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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now