Я пытаюсь центрировать div внутри другого div - PullRequest
Новая
       11

Я пытаюсь центрировать div внутри другого div

4 голосов
/ 26 марта 2011

Здесь - пример, с которым я работаю.Я хотел бы не использовать javascript, если это возможно, и если абсолютно необходимо без других возможных решений, я бы использовал jQuery.

3 внутренних элемента div, которые я пытаюсь центрировать, являются примером,В конечном итоге они генерируются скриптом, поэтому я не буду знать ширину или высоту, чтобы использовать отрицательный размер px для полей в классе .circle.

Я бы хотел изменить структуруdiv, но я ищу что-то простое и понятное, хотя я бы скорее изменил структуру, чем использовал javascript.

FF4, Safari (iOS) / Chrome, IE9 - мои конечные цели.

edit:

Этот - конечный результат, который я хотел бы, но он использует jquery.

Ответ Дэна также подойдет.Это ложится бременем на генерирующий скрипт для расчета отрицательных полей.В конце концов, я думаю, это было бы приемлемо, но я надеялся, что все, что мне нужно будет предоставить, - это желаемый размер, а не какая-либо информация, связанная с позиционированием, из генерирующего скрипта.Я пишу вручную.в конце это будет сгенерировано либо PHP, либо c # в зависимости от моей серверной платформы.

Ответы [ 3 ]

4 голосов
/ 26 марта 2011

Создание отрицательных полей в том же месте, что и размеры: 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    .container
    {
        position: relative;
        width: 500px;
        height: 500px;
        border: 1px solid yellow;
    }
    .circle
    {
        position: absolute;
        -moz-border-radius: 100%;
        border-radius: 100%;
        top: 50%;
        left: 50%;
     }
    .white
    {
        border: 1px solid White;
    }
    body
    {
        background-color: black;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="circle white" style="width: 100px; height: 100px; margin-top:-50px; margin-left: -50px"></div>
        <div class="circle white" style="width: 200px; height: 200px; margin-top:-100px; margin-left: -100px"></div>
        <div class="circle white" style="width: 400px; height: 400px; margin-top:-200px; margin-left: -200px"></div>
    </div>
</body>
</html>
0 голосов
/ 26 марта 2011

Что ж, если до этого дойдет, вот некоторые действия jQuery, чтобы выполнить работу. 

$(".circle").each(function(){
    $(this).css({top: -$(this).height()/2, left: -$(this).height()/2 });
});

Демонстрация: jsfiddle.net / Marcel / 7ucme

0 голосов
/ 26 марта 2011

Центр с полем : 0 авто .

Вам не нужно знать ширину раньше времени, если они установлены явно.

...