JQuery Mobile Button - Абсолютное положение от центра?

Я пытаюсь создать что-то в JQuery Mobile, однако мне нужно иметь возможность позиционировать кнопку из центра. Прямо сейчас, кнопка расположена в верхнем левом углу, и, как таковая, если я изменяю размер окна, все ужасно вне центра.JQuery Mobile Button - Абсолютное положение от центра?

<body> 
    <button>Button</button> 
    <div /> 
</body> 

div { 
position: absolute; 
width: 200px; 
height: 200px; 
background-color: black; 
} 

button { 
position: absolute; 
top: 200px; 
left: 200px; 
}

Fiddle: http://jsfiddle.net/chpt3x1v/4/ я не мог получить JQM работать в JSFiddle (не знаю, как без него, показывая нагрузок ошибок), так что я просто использовал очередную кнопку, но применяется та же предпосылка.

ДВА ИЗОБРАЖЕНИЯ: Как вы можете видеть, это полностью смещена от центра.

источник

2015-10-29 RealFighter64

ОБНОВЛЕНО ОТВЕТ:

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

Обновлено DEMO

<div class="thediv"></div>   
<button data-role="none" class="theButton">Button</button> 

.thediv { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    background-color: black; 
} 

.theButton { 
    position: fixed; /* or absolute */ 
    top: 200px; 
    left: 200px; 
    width: 80px; 
    height: 80px; 
    margin-top: -40px; 
    margin-left: -40px; 
}

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Вы можете использовать фиксированное позиционирование и отрицательный запас, чтобы держать его в центре:

<div data-role="page" id="page1"> 
    <div role="main" class="ui-content"> 
     <div class="centered"><button>Button</button></div> 
    </div> 
</div> 

.centered { 
    position: fixed; /* or absolute */ 
    top: 50%; 
    left: 50%; 
    background-color: black; 
    width: 200px; 
    height: 200px; 
    margin-top: -100px; 
    margin-left: -100px; 
} 

.centered button { 
    margin: 0 !important; 
    height: 100%; 
}

Обновлено FIDDLE

источник

2015-10-29 14:32:09 ezanker

Благодарим за ответ, но это был не мой вопрос. Я хочу, чтобы он был абсолютно позиционирован на определенной координате из центра. Не в центр, поэтому я хочу, чтобы центр кнопки находился там, где указаны координаты.Возможно, я недостаточно объяснил это в OP. Возможно, если я сделаю кнопку более крупной, это будет лучше иллюстрировать мою мысль. – RealFighter64

@ RealFighter64, ок, см. Обновленный ответ и jsFiddle. Отрицательные поля с заданной высотой и шириной - это трюк. – ezanker

Вопрос; чтобы сделать страницу масштабируемой для разных устройств, мне нужно использовать процентную ширину и высоту, будет ли это работать с этим? – RealFighter64

Во-первых, ваш код не имеет открывающего тега. Во-вторых, вам нужно иметь родительский элемент, т. Е. Div, расположенный как относительный.

В-третьих, вы разместили свою кнопку на самом краю div, используя те же размеры. Попытка:

<body> 
    <div> 
    <button>Button</button> 
    <div /> 
</body> 

div { 
position: relative; 
width: 200px; 
height: 200px; 
background-color: black; 
} 

button { 
position: absolute; 
top: 50%; 
left: 50%; 
z-index: 1; 
}

Свойство z-index позволит кнопке наложить div.

источник

2015-10-29 14:28:30 Andyjm

Спасибо за ответ, но это было не мой вопрос. Я использую div как руководство для размещения, чтобы показать свою точку зрения. Если я положу кнопку 200px, 200px, она будет помещена туда из левого верхнего угла, а я хочу, чтобы она была помещена из центра. Кроме того, это может также помочь сделать кнопку больше, чтобы проиллюстрировать ее лучше. – RealFighter64

Это немного запутанно, во-первых, почему вам нужно использовать div в качестве руководства по размещению в этом конкретном примере? Почему бы просто не использовать абсолютное позиционирование на кнопке? – Andyjm

Причина, по которой у меня есть div, заключается в том, что она показывает, где расположена кнопка относительно заданных координат, которая, как показано на OP, находится слишком далеко внизу справа. Я хочу, чтобы ЦЕНТР кнопки был помещен на углу div, а не в верхний левый угол. Угол div состоит только в том, чтобы показать, что кнопки должны появляться. – RealFighter64

JQuery Mobile Button - Абсолютное положение от центра?

ответ

Смежные вопросы