Question

如果我有一系列的链接，如：

 <a>foobar</a><a>foobar</a><a>foobar</a><a id="center">foobar</a><a>foobar</a>

但是其中一个得到了一个id =“center”，我可以用javascript或css将它放在中心位置吗？

Answer 1

如果你的意思是DOM-locality ......

您可能必须通过脚本实际操作DOM。我的猜测是你需要通过容器或公共类名来引用所有这些链接。然后将链接总数除以2，在该特定索引处插入中心链接。

$(function(){
 var bodyLinks = $("body a");
 var halfPoint = Math.floor(Number(bodyLinks.length/2)-1);
 $("body a:eq("+halfPoint+")").after($("#center"));
});

在线演示：http://jsbin.com/aroba/edit

如果您的意思是CSS-placement：

<p><!-- padleft -->link1 link2 link3 **link4** link5 link6
                               link1 **link2** link3 link4 link5 link6
       link1 link2 link3 link4 link5 **link6**

这个解决方案有点不成熟，可以从进一步的开发中受益。基本上我把链接放在一个段落中。然后，我计算了特殊链接（我们的中心链接）之前的所有元素的总宽度，并用它来计算包含段落标记的填充左边。

$(function(){
  var elWidth = $("#center").width();
  var elOffset = $("#center").offset().left;
  var wnWidth = $("body").width();
  var sibWidths = 0;

  $("#center").prevAll("a").each(function(){
    sibWidths = sibWidths + $(this).width();
  });

  var gutter = ((wnWidth-elWidth)/2)-sibWidths;

  $("body p:first").css({paddingLeft:gutter});

});

在线演示：http://jsbin.com/oniba/edit

Answer 2

你的问题遗漏了一些细节，但这可能与你所追求的相近：

$("#center").css({
    position: "absolute",
    left: function () { 
        return (this.offsetParent.offsetWidth - this.offsetWidth) / 2 + "px";
    }
});

Answer 3

更新：这是另一个需要：

<html>
<head>
    <title>SO</title>
    <style type="text/css">
        td{
            padding:0;
        }
        .left{
            width: 49%;
            text-align:right;
        }
        .right {
            width: 49%;
            text-align:left;
        }
        .middle {
            width: 2%;
            text-align:center;
            background:#DEF;
            white-space:nowrap;
        }
        td div {
            overflow: hidden;
            height:1.2em;
        }
    </style>
</head>
<body>

</head>
<body>
    <table>
        <tr>
            <td class="left"><div><a>left 1</a><a>left 2</a><a>left 3</a><a>left 4</a><a>left 5</a><a>left 6</a><a>left 7</a><a>left 8</a></div></td>
            <td class="middle"><a>center</a></td>
            <td class="right"><div><a>right 1</a><a>right 2</a><a>right 3</a><a>right 4</a><a>right 5</a><a>right 6</a></div></td>
        </tr>
    </table>
</body>
</html>

以元素为中心？

3 个答案:

如果你的意思是DOM-locality ......

如果您的意思是CSS-placement：