центрировать элемент? - PullRequest
Новая
       2

центрировать элемент?

0 голосов
/ 09 февраля 2010

если у меня есть строка ссылок вроде: 

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

но один из них получил id = "center", могу ли я с помощью javascript или css поместить его в центр?

Ответы [ 3 ]

3 голосов
/ 09 февраля 2010

Если вы имеете в виду DOM-локальность ...

Возможно, вам придется управлять 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-размещение: 

<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

1 голос
/ 09 февраля 2010

ОБНОВЛЕНО: Вот еще один дубль: 

<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>
1 голос
/ 09 февраля 2010

Ваш вопрос опускает несколько деталей, но это может быть близко к тому, что вы ищете: 

$("#center").css({
    position: "absolute",
    left: function () { 
        return (this.offsetParent.offsetWidth - this.offsetWidth) / 2 + "px";
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...