3

我将一个可变宽度的表格与 css 居中为：

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

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

但在这种情况下，我喜欢将这张桌子偏左一点。
请注意，此表的宽度是可变的。
表格的中心必须在40%它所在的 div 之外。
假设表格下方有一个 width 200px。
通常在居中时，它400px的左侧和右侧都有空间。
但现在我喜欢在桌子300px的左边和500px右边。

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

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

我需要什么 CSS 代码来使这个表偏离中心？

4

3 回答 3

1

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

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

于 2013-01-14T22:05:41.040 回答
1

table用 a包裹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然后将 thediv和 the推到' 父级宽度table的右侧，有效地将表格居中在.40%div40%

如果您打算不仅仅是table在同一个父级中居中，那么使用 2 个包装器会更简单；那么没有必要附加.center-inner到每个孩子：

<div class="center-outer">
  <div class="center-inner">
    <table>
      <!-- ... -->
    </table>
    <p>
      <!-- ... -->
    </p>
  </div>
</div>
于 2013-01-14T22:02:22.397 回答
0

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

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

（假设您的示例中有一半像素，使其也可以在具有较小屏幕的 jsFiddle 上工作：总像素为 500，宽度为 100 像素的表格）

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

http://jsfiddle.net/u4Haa/

于 2013-01-14T22:15:08.400 回答