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?
views:
109answers:
3
+3
A:
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
Jonathan Sampson
2010-02-09 15:52:51
my fault. my description wasnt clear. i want the element order to be the same. but now in Firefox the row starts from the left. so center tag wont be in the center of the webbrowser. i wonder if i could have the whole row positioned so that the center tag is in the center.
weng
2010-02-09 17:09:45
@noname: Please see my addition regarding padding of a container.
Jonathan Sampson
2010-02-09 17:41:07
it worked great. thanks! do you know how to fix this one: http://jsbin.com/afuni/edit i need the left side to be outside the div too...so that the center tag will be in the center. now i used the other answer here in the same thread..but using your will show the same result..
weng
2010-02-09 20:43:05
btw..i solved it with your javascript code..:)
weng
2010-02-09 21:44:18
+1
A:
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";
}
});
Sean
2010-02-09 16:01:18
+1
A:
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>
Mic
2010-02-09 17:08:25
that works only if its a short row. i have the table wrapped inside a div which i styled with overflow: hidden and white-space: nowrap. if ive got 100 left links then the center link wont be centered. u know how to fix it so the links will stick out in the left side to? in that way the center link will be centered i guess.
weng
2010-02-09 17:19:30
Did you try to put a space either between the A's or at the end of the text of the A like: <a>foobar </a>, if you do that the text will wrap.
Mic
2010-02-09 18:34:17
take a look at this: http://jsbin.com/afuni/edit i need the left side to be outside the div too...so that the center tag will be in the center.
weng
2010-02-09 19:54:52