center an element?
if i've got a line of links like:
<a>foobar</a><a>foobar</a><a>foobar</开发者_开发知识库a><a id="center">foobar</a><a>foobar</a>
but one of them got an id="center", could i with javascript or css position it in the center?
If you mean DOM-locality...
You could have to actually manipulate the DOM via scripting. My guess is that you would need to have a way to reference all of these links, by a container or a common classname. Then divide the total number of links by 2, inserting the center link at that particular index.
$(function(){
var bodyLinks = $("body a");
var halfPoint = Math.floor(Number(bodyLinks.length/2)-1);
$("body a:eq("+halfPoint+")").after($("#center"));
});
Online demo: http://jsbin.com/aroba/edit
If you mean CSS-placement:
<p><!-- padleft -->link1 link2 link3 **link4** link5 link6
link1 **link2** link3 link4 link5 link6
link1 link2 link3 link4 link5 **link6**
This solution is a bit premature, and could benefit from some further development. Essentially I placed the links within a paragraph. I then calculated the total width of all elements preceding the special-link (our center link) and used it to figure a padding-left for the containing paragraph tag.
$(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});
});
Online demo: http://jsbin.com/oniba/edit
Your question leaves out a few details, but this might be close to what you're after:
$("#center").css({
position: "absolute",
left: function () {
return (this.offsetParent.offsetWidth - this.offsetWidth) / 2 + "px";
}
});
UPDATED: Here's another take:
<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>
加载中,请稍侯......
精彩评论