Solved

centering a table vertically in a div with CSS

Posted on 2014-07-18
2
139 Views
Last Modified: 2014-07-21
I have this example:

http://jsfiddle.net/GS5f3/

This example has a div with a table in it. Right now it seems my table is vertically at the top of my div

When I run it it seems the table is not centered vertically in my div.

How do I fix it so my table is centered vertically on my div?
0
Comment
Question by:maqskywalker
[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
2 Comments
 
LVL 17

Accepted Solution

by:
Daniel Reynolds earned 300 total points
ID: 40205725
just position the table relatively within the div and give it top: 50% and left: 50%.

You can take out the left and just use top

http://jsfiddle.net/EZk3T/1/

:: competing site link removed ::
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 200 total points
ID: 40205790
Easiest way is to add this to your container div css
http://jsfiddle.net/GS5f3/2/

display: table-cell;
vertical-align: middle;

Open in new window

0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Ajax on ASP 2 65
disable open new tab with right mouse click in <a> tag 3 38
HTML CSS and  Table design 4 61
carousel control extend past the images 9 23
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

738 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