jQuery를 사용하여 DIV를 화면 중앙에 배치
이 설정을 어떻게 해야 하나요?<div>j를 사용하여 Query query query query query query query query query query query query query?
jQuery에 함수를 추가하는 것을 좋아하기 때문에 이 함수는 다음과 같습니다.
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
이제 다음과 같이 쓸 수 있습니다.
$(element).center();
데모: 바이올린(파라미터 추가)
여기에 jquery 플러그인을 넣습니다.
매우 짧은 버전
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});
쇼트 버전
(function($){
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});
})(jQuery);
다음 코드로 활성화됨:
$('#mainDiv').center();
플러그인 버전
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // Default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minX:0, // pixel, minimum left element value
minY:0, // pixel, minimum top element value
withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top+'px'});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left+'px'});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
return $(this);
});
}
});
})(jQuery);
다음 코드로 활성화됨:
$(document).ready(function(){
$('#mainDiv').center();
$(window).bind('resize', function() {
$('#mainDiv').center({transition:300});
});
);
그래요?
갱신:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
}
jQueryUI Position 유틸리티를 권장합니다.
$('your-selector').position({
of: $(window)
});
단지 ...을 중심으로 하는 것보다 훨씬 더 많은 가능성을 제공합니다.
내가 해볼게.내 라이트박스 클론용으로 사용했어.이 솔루션의 주요 장점은 창의 크기가 변경되어도 요소가 자동으로 중심에 유지되므로 이러한 용도에 이상적입니다.
$.fn.center = function() {
this.css({
'position': 'fixed',
'left': '50%',
'top': '50%'
});
this.css({
'margin-left': -this.outerWidth() / 2 + 'px',
'margin-top': -this.outerHeight() / 2 + 'px'
});
return this;
}
다음과 같이 CSS만을 사용하여 중앙에 배치할 수 있습니다.
.center{
position: absolute;
height: 50px;
width: 50px;
background:red;
top:calc(50% - 50px/2); /* height divided by 2*/
left:calc(50% - 50px/2); /* width divided by 2*/
}<div class="center"></div>calc()css하다
@TonyL의 훌륭한 답변에 대해 자세히 말씀드리겠습니다.값을 줄바꿈하기 위해 Math.abs()를 추가하고 WordPress와 같이 jQuery가 "경합 없음" 모드일 수도 있습니다.
아래처럼 왼쪽과 위쪽 값을 Math.abs()로 랩하는 것을 권장합니다.창이 너무 작고 모달 대화상자의 상단에 닫힘 상자가 있으면 닫힘 상자가 표시되지 않는 문제를 방지할 수 있습니다.토니의 함수는 잠재적으로 음의 값을 가졌을 것이다.음의 값이 표시되는 경우의 좋은 예로서, 중앙에 큰 대화상자가 있지만 최종 사용자가 여러 개의 툴바를 설치하거나 기본 글꼴을 늘린 경우입니다.이 경우 모달 대화상자의 닫기 상자(위쪽에 있는 경우)는 표시되지 않고 클릭할 수 없습니다.
또 하나는 $(window) 오브젝트를 캐싱하여 DOM 트래버설을 줄이고 클러스터 CSS를 사용하는 것입니다.
jQuery.fn.center = function ($) {
var w = $(window);
this.css({
'position':'absolute',
'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
});
return this;
}
사용하기 위해서는 다음과 같은 작업을 수행합니다.
jQuery(document).ready(function($){
$('#myelem').center();
});
jQuery UI를 사용합니다. position★★★★★★ 。
<div id="test" style="position:absolute;background-color:blue;color:white">
test div to center in window
</div>
ID가 "test"인 div가 중앙에 있는 경우 다음 스크립트는 문서 준비 시 창의 div를 중앙에 배치합니다.(위치 옵션의 "my" 및 "at" 기본값은 "center"입니다.)
<script type="text/javascript">
$(function(){
$("#test").position({
of: $(window)
});
};
</script>
한 가지 문제를 수정하고 싶습니다.
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
위의 코드는 다음과 같은 경우에는 작동하지 않습니다.this.height를 조정하고 합니다).및 (사용자가 화면 크기를 조정하고 가 다이내믹하다고 가정합니다).scrollTop() = 0 , ::
window.height600
this.height650
600 - 650 = -50
-50 / 2 = -25
에 놓이게 되었습니다.-25오프스크린
이건 테스트 안 해봤지만, 이런 건 할 수 있을 거야.
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
페이지 중앙에 항상 요소를 배치하고 싶다면 절대적인 위치를 유지하는 것이 가장 좋다고 생각하지 않습니다.고정 요소가 필요할 수 있습니다.고정된 위치를 사용하는 다른 jquery centering 플러그인을 찾았습니다.이것은 고정 중심이라고 불립니다.
편집:
이 질문에서 뭔가 깨달은 것이 있다면, 바로 이것입니다.이미 효과가 있는 것을 변경하지 말아 주세요.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html에서 이 문제를 어떻게 처리했는지에 대한 (거의) 그대로의 복사본을 제공하고 있습니다.- IE에 대한 해킹이 심하지만 질문에 대한 답변은 CSS에 의한 것입니다.
.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper {#position:absolute; #top:50%;
display:table-cell; vertical-align:middle;}
.content {#position:relative; #top:-50%;
margin:0 auto; width:200px; border:1px solid orange;}
바이올린: http://jsfiddle.net/S9upd/4/
브라우저샷을 통해 실행해 봤지만 괜찮은 것 같습니다.다른 이유가 없다면 CSS 사양에 따른 마진율 처리가 밝혀질 수 있도록 원본을 아래에 보관합니다.
오리지널:
나 파티에 늦었나 봐!
위의 코멘트는 이것이 CSS 질문이라는 것을 시사합니다.즉, 우려의 분리 등입니다.먼저 CSS가 이번 건에서 정말 자폭했다고 말씀드리겠습니다.내 말은, 이걸 하는 게 얼마나 쉬울까?
.container {
position:absolute;
left: 50%;
top: 50%;
overflow:visible;
}
.content {
position:relative;
margin:-50% 50% 50% -50%;
}
맞죠? 컨테이너의 왼쪽 상단 모서리가 화면 중앙에 있고, 음의 여백이 있으면 컨텐츠가 마법처럼 페이지의 절대 중앙에 다시 나타납니다.http://jsfiddle.net/rJPPc/
틀렸어! 수평 위치도 괜찮지만 수직 위치도...아, 그래.외관상 css에서는 상단 여백을 %로 설정할 때 값은 항상 포함 블록의 폭에 상대적인 백분율로 계산된다.사과와 오렌지처럼!만약 당신이 저나 Mozilla doco를 믿지 않는다면, 위의 바이올린으로 콘텐츠 폭을 조정하고 놀려보세요.
CSS가 제 생계수단인 만큼 저는 포기하지 않았습니다.동시에 쉬운 것도 좋아하기 때문에 체코의 CSS 전문가로부터 얻은 것을 빌려, 작업용 바이올린으로 만들었습니다.간단히 말하면, 수직 정렬이 중간으로 설정된 테이블을 만듭니다.
<table class="super-centered"><tr><td>
<div class="content">
<p>I am centered like a boss!</p>
</div>
</td></tr></table>
또한 콘텐츠의 위치가 이전 마진보다 미세 조정되어 있습니다:0 auto;:
.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
약속대로 작업: http://jsfiddle.net/teDQ2/
Chrome에서는 이 기능의 이행 컴포넌트가 제대로 작동하지 않았습니다(다른 곳에서는 테스트하지 않았습니다).창문의 크기를 좀 더 크게 조정하면 요소를 천천히 움직여서 따라잡을 수 있게 됩니다.
다음 함수는 이 부분을 주석으로 나타냅니다.또한 수평이 아닌 수직으로 중심을 잡는 경우 옵션인 x와 y 부울란을 통과시키기 위한 파라미터를 추가했습니다.다음은 예를 제시하겠습니다.
// Center an element on the screen
(function($){
$.fn.extend({
center: function (x,y) {
// var options = $.extend({transition:300, minX:0, minY:0}, options);
return this.each(function() {
if (x == undefined) {
x = true;
}
if (y == undefined) {
y = true;
}
var $this = $(this);
var $window = $(window);
$this.css({
position: "absolute",
});
if (x) {
var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
$this.css('left',left)
}
if (!y == false) {
var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();
$this.css('top',top);
}
// $(this).animate({
// top: (top > options.minY ? top : options.minY)+'px',
// left: (left > options.minX ? left : options.minX)+'px'
// }, options.transition);
return $(this);
});
}
});
})(jQuery);
에인 요소의 , 「」를 하지 말아 주세요position: absolute은 '아까보다'가 되어야 합니다fixed 수단: " 첫 번째 위치에 있는 요소에 으로 배치됩니다absolute 평균: "요소는 정적이 아닙니다.")
제안된 중앙 플러그인의 이 대체 버전은 "px" 대신 "%"를 사용하기 때문에 창의 크기를 조정하면 내용이 중앙에 유지됩니다.
$.fn.center = function () {
var heightRatio = ($(window).height() != 0)
? this.outerHeight() / $(window).height() : 1;
var widthRatio = ($(window).width() != 0)
? this.outerWidth() / $(window).width() : 1;
this.css({
position: 'fixed',
margin: 0,
top: (50*(1-heightRatio)) + "%",
left: (50*(1-widthRatio)) + "%"
});
return this;
}
margin: 0내용 여백을 폭/높이에서 제외합니다(위치를 고정하고 있기 때문에 여백을 두는 것은 의미가 없습니다).jQuery를 에 .outerWidth(true)마진이 포함되어 있어야 하는데 Chrome에서 시도했을 때 예상대로 작동하지 않았습니다.
50*(1-ratio)★★★★
너비: 창너너:W = 100%
: 소소( （ %) :w = 100 * elementWidthInPixels/windowWidthInPixels
중도좌파를 계산하기 위해:
left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
= 50 * (1-elementWidthInPixels/windowWidthInPixels)
정말 멋지다.콜백 기능을 추가했습니다.
center: function (options, callback) {
if (options.transition > 0) {
$(this).animate(props, options.transition, callback);
} else {
$(this).css(props);
if (typeof callback == 'function') { // make sure the callback is a function
callback.call(this); // brings the scope to the callback
}
}
여기에서는 중심화하려는 요소가 고정 또는 절대 위치 설정뿐 아니라 중심화하려는 요소가 부모 요소보다 작도록 하는 "중앙화" 방식입니다. 이 방법은 중심화하려는 요소가 부모 요소보다 작으면 해당 요소가 위로 이동합니다.DOM을 다음 부모에게 전달하고, 그 부모에 상대적인 중심을 맞춥니다.
$.fn.center = function () {
/// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>
var element = $(this),
elementPos = element.css('position'),
elementParent = $(element.parent()),
elementWidth = element.outerWidth(),
parentWidth = elementParent.width();
if (parentWidth <= elementWidth) {
elementParent = $(elementParent.parent());
parentWidth = elementParent.width();
}
if (elementPos === "absolute" || elementPos === "fixed") {
element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
}
};
CSS 솔루션 두 줄만
가로와 세로로 내면의 디바이를 집중시킵니다.
#outer{
display: flex;
}
#inner{
margin: auto;
}
수평 정렬 전용, 변경
margin: 0 auto;
세로 방향의 경우 변경
margin: auto 0;
나는 이것을 사용한다:
$(function() {
$('#divId').css({
'left' : '50%',
'top' : '50%',
'position' : 'absolute',
'margin-left' : -$('#divId').outerWidth()/2,
'margin-top' : -$('#divId').outerHeight()/2
});
});
다음을 사용하십시오.
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
문서를 스크롤할 때마다 요소의 위치를 조정하기 때문에 전환이 제대로 이루어지지 않습니다.당신이 원하는 것은 고정된 위치를 사용하는 것입니다.위의 고정 센터 플러그인을 사용해 봤더니 문제가 잘 해결된 것 같습니다.고정 위치 설정을 사용하면 요소를 한 번 중앙에 배치할 수 있으며 CSS 속성은 스크롤할 때마다 해당 위치를 유지합니다.
여기 제 버전이 있습니다.이 예시를 보고 바꿀지도 모릅니다.
$.fn.pixels = function(property){
return parseInt(this.css(property));
};
$.fn.center = function(){
var w = $($w);
return this.each(function(){
$(this).css("position","absolute");
$(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
$(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
});
};
이것에는 질의가 필요 없습니다.
이걸 이용해서 Div 요소를 가운데에 뒀어요.CSS 스타일,
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
오픈 엘리먼트
$(document).ready(function(){
$(".open").click(function(e){
$(".black_overlay").fadeIn(200);
});
});
토니 L의 답변에 대한 나의 업데이트 이것은 내가 현재 종교적으로 사용하는 그의 답변의 변형판이다.공유하려고 합니다.여러 가지 상황에 맞게 기능이 조금 더 추가되기 때문에position또는 둘 다 아닌 수평/수평 중심만을 원합니다.
center.filename:
// We add a pos parameter so we can specify which position type we want
// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
this.css("position", pos);
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
// Center it vertically only
jQuery.fn.centerVer = function (pos) {
this.css("position", pos);
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
return this;
}
인마이<head>:
<script src="scripts/center.js"></script>
사용 예:
$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")
$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")
$("#example5").center("absolute")
$("#example6").center("fixed")
모든 포지셔닝 유형에 대응하여 사이트 전체에서 쉽게 사용할 수 있을 뿐만 아니라 작성한 다른 사이트로 쉽게 이동할 수 있습니다.무언가를 적절히 배치하기 위한 성가신 회피책은 더 이상 없습니다.
이게 누군가에게 도움이 되었으면 좋겠네요!즐거운 시간 되세요.
여러 가지 방법이 있어오브젝트는 BODY 태그 내에서만 숨겨져 있습니다.따라서 포지셔닝은 BODY에 상대적입니다.$("#object_id").show()를 사용한 후 $("#object_id").center()를 호출합니다.
position:absolute를 사용합니다.이는 특히 작은 모바일 디바이스에서는 모달창이 디바이스창보다 클 수 있기 때문입니다.이 경우 포지셔닝이 고정되면 모달 콘텐츠 중 일부에 액세스할 수 없게 될 수 있습니다.
다른 사람의 답변과 특정 요구에 근거한 내 취향은 다음과 같습니다.
$.fn.center = function () {
this.css("position","absolute");
//use % so that modal window will adjust with browser resizing
this.css("top","50%");
this.css("left","50%");
//use negative margin to center
this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");
//catch cases where object would be offscreen
if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});
return this;
};
CSS를 사용할 수 있습니다.translate속성:
position: absolute;
transform: translate(-50%, -50%);
보통은 CSS로만...jQuery에게 방법을 물어봤으니...
다음 코드는 div를 컨테이너 안쪽에 수평 및 수직으로 배치합니다.
$("#target").addClass("centered-content")
.wrap("<div class='center-outer-container'></div>")
.wrap("<div class='center-inner-container'></div>");body {
margin : 0;
background: #ccc;
}
.center-outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
}
.center-inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>$("#divID").html($("").html($("#divID")).html())이라고 말하면 됩니다.
CSS만으로 실행할 수 있습니다.그러나 그들은 jQuery 또는 JavaScript로 물었다.
여기서 특성을 사용하여 디바운 중심을 정렬합니다.
body.center{
display:flex;
align-items:center; // Vertical alignment
justify-content:center; // Horizontal alignment
}
align-backet:center; - 수직으로 정렬하는 데 사용됩니다.
justice-content:center; - 수평 정렬에 사용됩니다.
document.querySelector("body").classList.add("center");body {
margin : 0;
height:100vh;
width:100%;
background: #ccc;
}
#main{
background:#00cc00;
width:100px;
height:100px;
}
body.center{
display:flex;
align-items:center;
justify-content:center;
}<body>
<div id="main"></div>
</body>UL을 중간 위치에 놓기 위해 이걸 사용했어요.
cadasWidth = $('.card-dashboard').innerWidth();
cadasWidthCenter = cadasWidth/2;
ulmenuWidth = $('.card-dashboard ul#menu').outerWidth();
ulmenuWidthCenter = ulmenuWidth/2;
ulmenuStart = cadasWidthCenter - ulmenuWidthCenter;
$('.card-dashboard ul#menu').css({
'left' : ulmenuStart,
'position' : 'relative'
});
왜 CSS를 사용하여 div의 중심을 맞추지 않는 거죠?
#timer_wrap{
position: fixed;
left: 50%;
top: 50%;
}
언급URL : https://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen
'source' 카테고리의 다른 글
| Vue.js, Vuex, Vue-Router SPA 및 애플리케이션 클라이언트 측과 서버 측 간의 확장 (0) | 2023.01.29 |
|---|---|
| 장고는 스케일링 되나요? (0) | 2023.01.29 |
| Java는 정적 초기화 블록에서 선택된 예외를 발생시키는 것을 허용하지 않는 이유는 무엇입니까? (0) | 2023.01.29 |
| Larabel 4에서 새로운 빈 웅변 컬렉션을 수동으로 만드는 방법 (0) | 2023.01.29 |
| php.ini & SMTP= - 사용자 이름과 비밀번호 전달 방법 (0) | 2023.01.29 |