0

我试图.spinner在以下标记（小提琴）中垂直居中元素：

<div class=grid>
  <div class=spinner></div>
  <table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
  </table>
</div>

使用以下样式：

.spinner {
    position: relative;
    top: 50%;
    left: 50%;
    height: 3px;
    width: 3px;
    background-color: red;
}

如果我将该.spinner top属性设置为某个像素值，浏览器实际上会根据该值定位它，但如果我尝试将其设置为百分比，则它不起作用。

如何垂直居中.spinner元素？

注意：我知道我可以将.grid位置设置为相对位置并将.spinner位置设置为绝对位置，但我更愿意保持网格静态定位。.grid在不修改's 样式的情况下这可能吗？

4

1 回答 1

3

首先，你应该使用absolute定位，用.gridset来relative定位。然后，在元素上设置top、bottom、left和rightto 。由于您有一个固定的/ ，因此定位将完美地居中元素（示例）：0.spinnerwidthheightmargin:auto;

.grid {
    position:relative;
}
.spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    height: 3px;
    width: 3px;
    background-color: red;
}

table {
    width: 100%;
}

最后回应您的注释，不，元素的静态定位是不可能的.grid（除非您在.grid元素中添加包装器）。这是因为如果.spinner没有某种具有相对定位的容器（这是元素发挥作用的地方）position:relative;，该元素无法知道表格的高度尺寸。.grid您可以根据需要使用负边距或相对定位来解决此问题，但它永远无法容纳动态内容（使用当前的浏览器/标准集）。

于 2012-11-21T15:36:12.787 回答