Solved

How to vertically center an element?

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

803 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