Question

我将一个带有css的可变宽度表居中：

#article {width=1000px}
table.center {margin: 0 auto}

<div id="article">
<table class="center">
.....
</table>
</div>

但是在这种情况下，我喜欢在左边稍微偏离中心 请注意，此表的宽度是可变的桌子的中心必须离开它所在的40% 假设在下面的情况下，表格的宽度为200px 通常，在居中时，左侧和右侧有400px个空间。
但现在我希望左边有300px，右边有500px。

#article {width=1000px}
table.offcenter20left { ??? }

<div id="article">
<table class="offcenter20left">
....
</table>
</div>

我需要哪些CSS代码来偏离此表？

Answer 1

用table包裹div并使用相对定位：

<div class="center-outer">
  <table class="center-inner">
    <!-- ... -->
  </table>
</div>

附带的CSS：

.center-outer {
  position: relative;
  float: left;
  left: 40%;
}

.center-inner {
  position: relative;
  float: left;
  left: -50%;
}

.center-inner将table向左移动50%自己的宽度，将其居中于左边缘的中心位置。 .center-outer然后将div和table推向40%父级宽度div的右边，有效地将表格置于{{1}的中心位置}}

如果您打算在同一父级中居中不仅仅是40%，那么使用2个包装器会更简单;那么没有必要将table附加到每个孩子身上：

.center-inner

Answer 2

使用包装器，您可以使用负边距。这支持百分比值，并允许它是动态的。

HTML

<div class="article">
  <div class="wrapper">
    <table class="offcenter20left">
      <tr>
        <td>.....</td>
      </tr>
    </table>
  </div>
</div>

CSS

table.offcenter20left {
  margin:0 auto;
}

.wrapper {
  margin-left:-20%; /* adjust as desired */
}

来源：http://jsfiddle.net/8Gas6/3
演示：http://jsfiddle.net/8Gas6/3/show

Answer 3

使用CSS3 Calc，您可以动态执行数学运算：

margin-left: calc(40% - 50px);

（假设你的例子中有一半的像素，使其适用于jsFiddle，屏幕也更小：总像素为500，宽度为100px的表格）

（calc（）中的50px是表大小的一半）

http://jsfiddle.net/u4Haa/

偏离中心可变宽度表

3 个答案:

HTML

CSS