CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ajsie
ajsie

Reputation: 79666

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?

Upvotes: 0

Views: 334

Answers (3)

Mic
Mic

Reputation: 25154

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>

Upvotes: 1

Sampson
Sampson

Reputation: 268324

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

Upvotes: 3

Sean
Sean

Reputation: 29772

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";
    }
});

Upvotes: 1

Related Questions