Skip to content

alinejb/magic-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Magic Table

Magic Table is a simple CSS framework that allows you to center an element both vertically and horizontally, without the need to use a real table (thus the 'Magic Table' name) or the line-height trick.

HTML

<div class="mg-table">
  <div class="mg-cell">
    <div class="mg-text">
      <p>Your Text</p>  
    </div>
  </div>
</div>

CSS

.mg-table{
  display:table;
  text-align:center;
  /* IE 7 */
  *position:relative;
  *display:block;
}
.mg-table .mg-cell{
  display: table-cell;
  vertical-align: middle;
  /* IE 7 */
  *display:block;
  *position:absolute;
  *top:50%;
}
.mg-table .mg-text{
  /* IE 7 */
  *display:block;
  *position:relative;
  *top:-50%;
  *left:-50%;
}

Demo

Magic Table is compatible with all modern browsers and IE7+

About

Center element in Vertical and Horizontal

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages