如何将表格放置在div水平&垂直 [英] How to position a table at the center of div horizontally & vertically

问题描述

我们可以将图片设置为< div> 的背景图片，例如：

We can set a image as background image of a <div> like:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

我需要在< div> 水平&垂直。是否有跨浏览器解决方案使用 CSS ？

I need to set a table at the center of a <div> horizontally & vertically. Is there a cross-browser solution using CSS?

推荐答案

CSS中最大的问题之一。但是，存在一些技巧：

Centering is one of the biggest issues in CSS. However, some tricks exist:

要将表格水平放置，您可以将左右边距设置为自动：

To center your table horizontally, you can set left and right margin to auto:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

要垂直居中，唯一的方法是使用javascript：

To center it vertically, the only way is to use javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

否 vertical-align：middle

这里是一个网站，总结CSS中心解决方案： http://howtocenterincss.com/

Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/

这篇关于如何将表格放置在div水平&垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！