স্ক্রিনে একটি ডিআইভি কেন্দ্রের জন্য jQuery ব্যবহার করা

760

আমি <div>jQuery ব্যবহার করে কীভাবে পর্দার কেন্দ্রে একটি সেট স্থাপন করব ?

javascript  jquery  html  css  layout 
— ক্রেইগ
সূত্র
20
এটি jQuery প্রশ্নের চেয়ে সিএসএসের প্রশ্ন। ক্রস ব্রাউজারের অবস্থান নির্ণয় করতে এবং কোনও উপাদানটিতে সঠিক সিএসএস শৈলী প্রয়োগ করতে আপনি jQuery পদ্ধতিগুলি ব্যবহার করতে পারেন, তবে CSS এর সাহায্যে কীভাবে স্ক্রিনে একটি ডিভকে কেন্দ্র করা যায় সে প্রশ্নের মূল কথা।
— ক্রিস ম্যাকডোনাল্ড
এখানে আরও একটি প্লাগইন রয়েছে। আলেকজান্ড্রেম্যাগনো
— নেট.জেউকিউরি / প্লাগিনস / সেন্টার
2
আপনি যদি স্ক্রিনে একটি ডিভকে কেন্দ্র করে থাকেন তবে আপনি সম্ভবত স্থির অবস্থান ব্যবহার করতে পারেন। কেন শুধু এটি করবেন না: stackoverflow.com/questions/2005954/… । সমাধানটি খাঁটি সিএসএস, জাভাস্ক্রিপ্টের প্রয়োজন নেই।
— আরদী আরম
সম্মত হন, জাভাস্ক্রিপ্ট পদ্ধতি মোটেই বন্ধুত্বপূর্ণ নয়। বিশেষত ক্রস ব্রাউজার।
— সাইমন হাইটার

উত্তর:

1070

আমি 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();

ডেমো: ফিডল (যুক্ত প্যারামিটার সহ)

— টনি এল।
সূত্র
78
একটি পরিবর্তন আমি প্রস্তাব দিচ্ছি: আপনার কেবলমাত্র এই.হাইট () এবং এটি.উইথ () এর পরিবর্তে এই.উটারহাইট () এবং this.outerWidth () ব্যবহার করা উচিত। অন্যথায়, যদি অবজেক্টটির সীমানা বা প্যাডিং থাকে তবে এটি কিছুটা অফ-সেন্টারে শেষ হবে।
— ট্রেভর বার্নহ্যাম
82
কেন এটি jQuery এর কার্যকারিতার আদি অংশ নয়?
— শেঠ কারনেগি
14
যদি আমি <div>পরিবর্তে এর মধ্যে কেনা না চান <body>? হতে পারে আপনি পরিবর্তন করা উচিত windowকরতে this.parent()অথবা এটির জন্য একটি প্যারামিটার যোগ করুন।
— ডেরেক 朕 會 功夫
13
উত্তরের কোডটিতে "পজিশন: ফিক্সড" ব্যবহার করা উচিত যেহেতু "পরম" প্রথম আত্মীয় পিতামাতার কাছ থেকে গণনা করা হয়, এবং কোডটি কেন্দ্রটি গণনা করতে উইন্ডো ব্যবহার করে।
— দিয়েগো
2
আমি সমর্থন যোগ করার পরামর্শ দেব যাতে উইন্ডোটি পুনরায় আকার দেওয়ার পরে এটি পৃষ্ঠার উপাদানটি সামঞ্জস্য করবে। বর্তমানে এটি মূল মাত্রার সাথে থাকে।
— ওয়েবনেট
143

আমি একটি রাখা এখানে 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%;
}
— molokoloco
সূত্র
আপনার ফাংশনটি উল্লম্ব কেন্দ্রের জন্য পুরোপুরি সূক্ষ্মভাবে কাজ করেছে। এটি অনুভূমিক কেন্দ্রের জন্য কাজ করে না বলে মনে হয়।
— হালসফার
সিএসএস ধরে নিয়েছে যে আপনি কেন্দ্রিক ডিভের আকার (কমপক্ষে শতাংশ) জানেন তবে জিকুয়েরি যা কিছু কাজ করে।
— ডান্ক
আমার ভোটটি সিএসএস - আরও সহজবোধ্য এবং কোনও অভিনব জাভা স্ক্রিপ্টের প্রয়োজন নেই doesn't আপনি যদি স্থির পরিবর্তে স্থির ব্যবহার করেন তবে এটি পৃষ্ঠার কেন্দ্রে থাকবে এমনকি যখন ব্যবহারকারী ব্রাউজার উইন্ডোটি স্ক্রল করে
— 1616338
60

আমি jQueryUI পজিশন ইউটিলিটি সুপারিশ করব

$('your-selector').position({
    of: $(window)
});

যা আপনাকে কেবল কেন্দ্রিককরণের চেয়ে অনেক বেশি সম্ভাবনা দেয় ...

— cetnar
সূত্র
1
@ টিমউই - আপনি কি উইন্ডো বনাম ডকুমেন্টকে কেন্দ্র করে নিচ্ছেন তা নিশ্চিত?
— কেইথাকবার্থ
1
TypeError: $ (...)। পজিশনটি কোনও ফাংশন নয়
— মাইকেলেলজেলো
3
@ মিশেলেনজেলো: ফাংশন হিসাবে। অবস্থান () ব্যবহার করার জন্য আপনার jqueryUI লাইব্রেরি প্রয়োজন। Api.jqueryui.com/position/: পরীক্ষা করে দেখুন
— জেক
সেই স্নিপেটটি সেরা: ডি। তবে সাবধান করে দিন উপাদানটি অবশ্যই "দৃশ্যমান" হতে পারে ''
— সি ԃ ԃ
39

এখানে আমার যেতে। আমি আমার লাইটবক্স ক্লোনটির জন্য এটি ব্যবহার করে শেষ করেছি। এই সমাধানটির মূল সুবিধাটি হ'ল এই জাতীয় ব্যবহারের জন্য উইন্ডোটিকে পুনরায় আকার দেওয়ার পরেও উপাদানটি স্বয়ংক্রিয়ভাবে কেন্দ্রীভূত থাকবে।

$.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;
}
— জুহো ভেস্পলিয়েনেন
সূত্র
3
আমি মনে করি এটি ভালভাবে কাজ করে ... প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করার কারণে এটি আমার ক্ষেত্রে ভুল হয়েছে: স্ক্রিনের প্রস্থ পরিবর্তনের সাথে আমার ডিভের প্রস্থ পরিবর্তন হয়। কি পুরোপুরি কাজ করে টনি মধ্যে L'গুলি উত্তর এবং তারপর এই যোগ হল: $(window).resize(function(){$('#mydiv').center()}); (mydiv, একটি মোডাল ডায়ালগ তাই যখন এটি আমি পুনরায় আকার দেওয়ার ইভেন্ট হ্যান্ডলার অপসারণ বন্ধ করা হয়।)
— ড্যারেন কুক
1
কখনও কখনও আপনি ব্যবহার করতে outerWidth()এবং outerHeight()প্যাডিং এবং সীমানা প্রস্থ বিবেচনা করতে চাইতে পারেন ।
— ফিলিপ গারবার
এটি লিগ্যাসি প্রকল্পের জন্য পুরোপুরি কাজ করে যা ডক টাইপ 5 দিয়ে থাকে যেখানে $(window).height()0 দেয় But তবে আমি অবস্থানটি 'পরম' হয়ে গেছি।
— মাইখ্যালো অ্যাডমোভিচ
26

আপনি এর মত কেন্দ্র করতে একা সিএসএস ব্যবহার করতে পারেন:

কাজের উদাহরণ

.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() আপনাকে সিএসএসে বেসিক গণনা করতে দেয়।

calc()ব্রাউজার সমর্থন টেবিলের জন্য MDN ডকুমেন্টেশন

— apaul
সূত্র
মনে রাখবেন ক্যালক () আইই 8-তে সমর্থিত নয় যদি আপনার সেই ব্রাউজারটি জিকিউরি সেন্টার কৌশলটি ব্যবহার করা সমর্থন করে।
— এমবোকিল
14

আমি @ টনিএল দ্বারা দেওয়া দুর্দান্ত উত্তরের উপর প্রসারণ করছি। আমি মানগুলি মোড়ানোর জন্য ম্যাথ.এবস () যুক্ত করছি, এবং আমি এই বিষয়টিও বিবেচনা করি যে jQuery সম্ভবত "কোনও বিরোধের নয়" মোডে থাকতে পারে, যেমন ওয়ার্ডপ্রেসের উদাহরণস্বরূপ।

আমি প্রস্তাব দিচ্ছি যে আপনি নীচের মতো করে ম্যাথ.এবস () দিয়ে উপরের এবং বাম মানগুলি মুড়ে রাখুন। উইন্ডোটি যদি খুব ছোট হয় এবং আপনার মডেল ডায়ালগটির শীর্ষে একটি ঘনিষ্ঠ বাক্স থাকে, এটি ক্লোজ বাক্সটি না দেখার সমস্যাটিকে আটকাবে। টনির ফাংশনটির সম্ভাব্য নেতিবাচক মান থাকতে হবে। নেতিবাচক মানগুলির সাথে আপনি কীভাবে সমাপ্ত হচ্ছেন তার একটি উত্তম উদাহরণ হ'ল যদি আপনার কাছে একটি বৃহত কেন্দ্রিক ডায়লগ থাকে তবে শেষ ব্যবহারকারীটি বেশ কয়েকটি টুলবার ইনস্টল করে এবং / অথবা তার ডিফল্ট ফন্টটি বাড়িয়ে তোলে - এমন ক্ষেত্রে, একটি মডেল ডায়ালগের বন্ধ বক্স (যদি শীর্ষে) দৃশ্যমান এবং ক্লিকযোগ্য নাও হতে পারে।

আমি অন্যান্য কাজটি হ'ল $ (উইন্ডো) অবজেক্টটি ক্যাশে করে কিছুটা বাড়িয়ে তুলছি যাতে আমি অতিরিক্ত ডিওএম ট্র্যাভারসালগুলি হ্রাস করতে পারি এবং আমি একটি ক্লাস্টার সিএসএস ব্যবহার করি।

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();
});
— Volomike
সূত্র
আমি আপনার উন্নতি পছন্দ করি; তবে, আপনি যে সঠিক আচরণটি খুঁজছেন তার উপর নির্ভর করে এখনও একটি সমস্যা পেয়েছি। অ্যাপগুলি কেবল দুর্দান্তভাবে কাজ করবে যদি ব্যবহারকারী পুরোপুরি শীর্ষ এবং বামে স্ক্রোল করে থাকে, অন্যথায় ব্যবহারকারীকে শিরোনাম বারে যেতে ব্রাউজার উইন্ডোটি স্ক্রোল করতে হবে। এই সমস্যাটি সমাধান করার জন্য আমি এই জাতীয় বিবৃতি যেমন: if (top < w.scrollTop()) top = w.scrollTop();বাম জন্য সমতুল্য হিসাবে একটি সাধারণ করতে বেছে নেওয়া হয়েছে । আবার এটি বিভিন্ন আচরণ প্রদান করে যা কাঙ্ক্ষিত বা নাও হতে পারে।
— অ্যালেক্স জর্জনসন
11

আমি jQuery UI position ফাংশনটি ব্যবহার করব ।

কাজের ডেমো দেখুন ।

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

যদি আইডি "পরীক্ষা" দিয়ে কেন্দ্রের সাথে আমার ডিভি থাকে তবে নিম্নলিখিত স্ক্রিপ্টটি ডকুমেন্ট প্রস্তুতের জন্য উইন্ডোতে ডিভকে কেন্দ্র করবে। (অবস্থান বিকল্পগুলির "আমার" এবং "এট" এর জন্য ডিফল্ট মানগুলি "কেন্দ্র" হয়)

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>
— andy_edward
সূত্র
8

আমি একটি ইস্যু সংশোধন করতে চাই।

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

উপরের this.heightকোডগুলি সেই ক্ষেত্রে কাজ করবে না যখন (ধরে নেওয়া যাক যে ব্যবহারকারী পর্দার আকার পরিবর্তন করে এবং সামগ্রীটি গতিশীল) এবং scrollTop() = 0উদাহরণস্বরূপ:

window.heightহয় 600
this.heightহয়650

600 - 650 = -50  

-50 / 2 = -25

এখন বক্সটি -25অফস্ক্রিন কেন্দ্রিক reen

— জন কসাই
সূত্র
6

এটি অনির্ধারিত, তবে এর মতো কিছু কাজ করা উচিত।

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});
— অ্যান্ড্রু হেজেস
সূত্র
6

আমি মনে করি না যে আপনি যদি পৃষ্ঠার মাঝখানে কেন্দ্রীভূত একটি উপাদান চান তবে একটি নিখুঁত অবস্থান পাওয়া সবচেয়ে ভাল would আপনি সম্ভবত একটি নির্দিষ্ট উপাদান চান। আমি আরেকটি jquery কেন্দ্রিক প্লাগইন পেয়েছি যা স্থির অবস্থান নির্ধারণ করে। একে স্থির কেন্দ্র বলা হয় ।

— ফ্রেড
সূত্র
4

এই ক্রিয়াকলাপটির রূপান্তর উপাদানটি ক্রোমে আমার পক্ষে খুব খারাপভাবে কাজ করেছে (অন্য কোথাও পরীক্ষা করে নি)। আমি উইন্ডোটির একগুচ্ছ আকার পরিবর্তন করতাম এবং আমার উপাদান ধীরে ধীরে স্কুটের ধরণটি ধরতে চেষ্টা করত।

সুতরাং নিম্নলিখিত ফাংশন মন্তব্য যে অংশ আউট। অতিরিক্ত হিসাবে, আমি বিকল্প &

// 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);
— এরিক ডি ফিল্ডস
সূত্র
4

ব্রাউজার ভিউপোর্ট (উইন্ডো) এর সাথে সম্পর্কিত উপাদানটি কেন্দ্র করতে position: absolute, ব্যবহার করবেন না , সঠিক অবস্থানের মানটি হওয়া উচিত fixed(নিখুঁত অর্থ: "উপাদানটি তার প্রথম অবস্থানযুক্ত (স্থিতিশীল নয়) পূর্বপুরুষের সাথে সম্পর্কিত")।

প্রস্তাবিত সেন্টার প্লাগইনের এই বিকল্প সংস্করণটি "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)
— দিয়েগো
সূত্র
4

এটা অসাধারণ. আমি একটি কলব্যাক ফাংশন যুক্ত করেছি

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
   }
}
— কিথ
সূত্র
4

সম্পাদনা:

যদি প্রশ্নটি আমাকে কিছু শেখায়, এটি হ'ল: ইতিমধ্যে কার্যকর এমন কোনও কিছু পরিবর্তন করবেন না :)

এটি http://www.jakpsatweb.cz/css/css-versical-center-solution.html- এ কীভাবে পরিচালিত হয়েছিল তার একটি প্রায় (প্রায়) ভারব্যাটিম অনুলিপি সরবরাহ করছি - এটি আইইয়ের জন্য ভারীভাবে হ্যাক করা হয়েছে তবে এর একটি খাঁটি সিএসএস উপায় সরবরাহ করে প্রশ্নের উত্তর:

.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/

আমি এটি ব্রাউজারশটের মাধ্যমে চালিয়েছি এবং এটি দুর্দান্ত মনে হচ্ছে; যদি অন্য কিছুর জন্য না হয় তবে আমি মূলটি নীচে রাখব যাতে সিএসএস স্পেস দ্বারা নির্ধারিত মার্জিন শতাংশ হ্যান্ডলিং দিনের আলো দেখায়।

মূল:

মনে হচ্ছে আমি পার্টিতে দেরি করছি!

উপরে কিছু মন্তব্য রয়েছে যা পরামর্শ দেয় এটি একটি সিএসএস প্রশ্ন - উদ্বেগের বিচ্ছিন্নকরণ এবং সমস্ত কিছু। আমার এই প্রবন্ধটি বলতে শুরু করুন যে সিএসএস সত্যিই এই একের পায়ে নিজেকে গুলি করেছে। মানে, এটি করা কত সহজ হবে:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

রাইট? ধারকটির শীর্ষ বাম কোণটি পর্দার কেন্দ্রে থাকবে এবং নেতিবাচক মার্জিনের সাথে সামগ্রীটি ম্যাজিকভাবে পৃষ্ঠার নিখুঁত কেন্দ্রে উপস্থিত হবে! http://jsfiddle.net/rJPPc/

ভুল! অনুভূমিক অবস্থান ঠিক আছে, তবে উল্লম্বভাবে ... ওহ, আমি দেখতে পাচ্ছি। স্পষ্টতই সিএসএসে,% -এ শীর্ষে মার্জিন সেট করার সময়, মানটি সর্বদা শতাংশযুক্ত ব্লকের প্রস্থের সাথে তুলনামূলকভাবে গণনা করা হয়। আপেল ও কমলা পছন্দ! আপনি যদি আমার বা মজিলা ডকোতে বিশ্বাসী না হন, তবে সামগ্রীর প্রস্থকে সামঞ্জস্য করে উপরের ফ্রিডলটির সাথে একটি খেলা করুন এবং অবাক হয়ে যান।

এখন, সিএসএস হ'ল আমার রুটি এবং মাখন, আমি হাল ছাড়িনি। একই সময়ে, আমি সহজ জিনিস পছন্দ করি, তাই আমি চেক সিএসএস গুরুর অনুসন্ধানগুলি ধার করে এটিকে একটি কার্যকরী মজাদার মধ্যে পরিণত করেছি। দীর্ঘ গল্প সংক্ষিপ্ত, আমরা একটি টেবিল তৈরি করি যেখানে উল্লম্ব-সারিবদ্ধ মাঝখানে সেট করা আছে:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

এবং সামগ্রীর অবস্থানের তুলনায় ভাল পুরানো মার্জিনের সাথে সূক্ষ্ম সুরযুক্ত : 0 অটো; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

প্রতিশ্রুতি অনুযায়ী ফিডল কাজ করা: http://jsfiddle.net/teDQ2/

— ওভার
সূত্র
1
সমস্যাটি কেন্দ্রিক নয়।
— কনরাড বোরোস্কি
@GlitchMr: আমি কাজ বক্স আগামীকাল ডাবল চেক করতে চান, কিন্তু দ্বিতীয় বেহালার এ Chrome / সাফারি ম্যাক জরিমানা কাজ
— ওভার
ঠিক আছে, আমি ক্রোম, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার 8+ (আই 7 কাজ করে না) এ চেক করেছি এবং এটি কাজ করে। তবে এটি অপেরাতে কাজ করে না ... এবং এটি সাধারণ সিএসএস বিবেচনা করে খুব অদ্ভুত এবং এটি অন্যান্য ব্রাউজারগুলিতে কাজ করে।
— কনরাড বোরোভস্কি
@ গ্লিচমির: এইরকম একটি পুরানো প্রশ্নে নজর রাখার জন্য ধন্যবাদ। আমি একটি "সঠিক" উত্তর দেখানোর জন্য উপরের ফিডল লিংকটি আপডেট করেছি - এটি আপনার পক্ষে (বা বিস্মৃত হওয়াতে নিমজ্জন করুন works আমার সুযোগ হয়েছিল!)
— ও
হেই, যথাযথ উত্তর না পাওয়া পর্যন্ত আমি যা করবো তা অগ্রাহ্য নয় (বর্তমানে এটি অপেরাতে এখনও কাজ করে না, তবে আমি মনে করি এটি ব্রাউজার বাগ)) ওহ অপেক্ষা করুন ... আমি উইন্ডোটির আকার পরিবর্তন করব এবং এটি না হলে এটি কাজ করে যদি আমি নিজেই জেএসফিডেলের উইন্ডোজগুলিকে পুনরায় আকার দেব। সুতরাং, এটি কাজ করে :)। আমি এই জন্য দুঃখিত। তবে তবুও, আপনাকে সতর্কতা দেওয়া উচিত যে এটি আই 7 তে কাজ করে না। +1 টি। ওহ, এবং আমার মনে হয় এটি আই 6-তে কাজ করে ...
— কনরাড বোরোস্কি
3

আমার এখানে যা আছে তা একটি "কেন্দ্র" পদ্ধতিটি নিশ্চিত করে যে আপনি যে উপাদানটি কেন্দ্রের চেষ্টা করছেন সেটি কেবল "স্থির" বা "পরম" অবস্থানের নয়, এটি নিশ্চিত করে যে আপনি যে উপাদানটি কেন্দ্র করছেন তার পিতামাতার চেয়ে ছোট, এই কেন্দ্রগুলি এবং উপাদানটি পিতামাতার সাথে সম্পর্কিত, যদি উপাদানগুলির পিতা-মাতা উপাদানটির তুলনায় নিজেই ছোট হয় তবে এটি পরবর্তী পিতামাতার সাথে ডিওএম আপ করবে এবং এটি এর সাথে সম্পর্কিত হবে। 

$.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');
        }
    };
— রায়ান
সূত্র
2

আমি এটি ব্যবহার:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});
— হল্ডেন
সূত্র
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();
— সত্য
সূত্র
0

আপনি এই দরিদ্র স্থানান্তরটি পাচ্ছেন কারণ আপনি প্রতিবার ডকুমেন্টটি স্ক্রোল করার সময় উপাদানটির অবস্থান সামঞ্জস্য করছেন। আপনি যা চান তা স্থির অবস্থান ব্যবহার করা। আমি উপরের তালিকাভুক্ত স্থির কেন্দ্র প্লাগইনটি চেষ্টা করেছি এবং মনে হচ্ছে সমস্যাটি সুন্দরভাবে সমাধান করা সম্ভব। স্থির অবস্থান আপনাকে একবারে কোনও উপাদান কেন্দ্রে অনুমতি দেয় এবং সিএসএস সম্পত্তি আপনি যখনই স্ক্রোল করবেন ততবার আপনার জন্য সেই অবস্থান বজায় রাখার যত্ন নেবে।

— skaterdav85
সূত্র
0

এখানে আমার সংস্করণ। আমি এই উদাহরণগুলি দেখার পরে এটি পরিবর্তন করতে পারি।

$.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");
    });
};
— অ্যান্ডি
সূত্র
0

এই জন্য jquery প্রয়োজন নেই

আমি ডিভ উপাদানটি কেন্দ্রে এটি ব্যবহার করেছি। সিএসএস স্টাইল,

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

});
— সাজিথা রথনায়েকে
সূত্র
আপনি কি আপনার উত্তরের এইচটিএমএল অন্তর্ভুক্ত করতে ভুলে গেছেন?
— বেন
0

টনি এল এর জবাব আমার আপডেট, এটি এখন তাঁর ধর্মীয় উত্তরের সংস্করণ যা আমি এখন ধর্মীয়ভাবে ব্যবহার করি। আমি ভেবেছিলাম আমি এটি ভাগ করে নেব, যেহেতু এটি আপনার হতে পারে এমন বিভিন্ন পরিস্থিতিতে যেমন এটিতে আরও কিছুটা কার্যকারিতা যুক্ত করে, যেমন বিভিন্ন ধরণের positionবা কেবল উভয়ের চেয়ে অনুভূমিক / উল্লম্ব কেন্দ্রীভূত করতে চায়।

center.js:

// 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")

এটি যে কোনও অবস্থানের ধরণের সাথে কাজ করে এবং আপনার পুরো সাইট জুড়ে সহজেই ব্যবহার করা যেতে পারে, পাশাপাশি আপনার তৈরি অন্য কোনও সাইটের কাছে সহজে বহনযোগ্য। সঠিকভাবে কিছু কেন্দ্রীভূত করার জন্য আর বিরক্তিকর কাজ নেই work

আশা করি এটি কারও পক্ষে কার্যকর হবে! উপভোগ করুন।

— Fata1Err0r
সূত্র
0

এটি করার অনেক উপায়। আমার অবজেক্টটি প্রদর্শন সহ লুকিয়ে রাখা হয়েছে : কেবলমাত্র দেহী ট্যাগের মধ্যে কোনওটি যাতে পজিশনটি দেহের সাথে সম্পর্কিত। $ ("# অবজেক্ট_আইডি") ব্যবহার করার পরে । (দেখান) , আমি call ("# অবজেক্ট_আইডি") কল করি center কেন্দ্র ()

আমি অবস্থান ব্যবহার : পরম কারণ এটি সম্ভব, বিশেষত একটি ছোট মোবাইল ডিভাইসে, মোডাল উইন্ডোটি ডিভাইসের উইন্ডোর চেয়ে বড়, এমন অবস্থায় পজিশনিং ঠিক করা থাকলে মোডালের কিছু বিষয়বস্তু অ্যাক্সেসযোগ্য হতে পারে।

অন্যের উত্তর এবং আমার নির্দিষ্ট প্রয়োজনের ভিত্তিতে আমার স্বাদ এখানে:

$.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;
    };
— আমি একটি
সূত্র
0

আপনি সিএসএস translateসম্পত্তি ব্যবহার করতে পারেন :

position: absolute;
transform: translate(-50%, -50%);

আরও বিস্তারিত জানার জন্য এই পোস্টটি পড়ুন ।

— ফ্রেড কে
সূত্র
1
এর মতো কোনও কিছুর জন্য আপনি নিজের সেট করতে চান left: 50%এবং top: 50%তারপরে বিন্দুটি সঠিকভাবে স্থানান্তর করতে আপনি রূপান্তর অনুবাদটি ব্যবহার করতে পারেন। তবে এই পদ্ধতির সাহায্যে ক্রোমের মতো ব্রাউজারগুলি পরে আপনার পাঠ্যকে বিকৃত / অস্পষ্ট করবে, যা সাধারণত কাম্য নয় isn't উইন্ডোটির প্রস্থ / উচ্চতা ধরে নেওয়া ভাল, এবং তারপরে রূপান্তরটির সাথে গোলযোগ না করে তার উপর ভিত্তি করে বাম / শীর্ষে অবস্থান করুন। বিকৃতি রোধ করে এবং আমি এটি পরীক্ষা করেছি এমন প্রতিটি ব্রাউজার জুড়ে কাজ করে।
— Fata1Err0r
0

সাধারণত, আমি এটি কেবল সিএসএস দিয়েই করতাম ... তবে যেহেতু আপনি আপনাকে jQuery দিয়ে এটি করার উপায় জিজ্ঞাসা করেছেন ...

নিম্নলিখিত কোডটি তার ধারকটির ভিতরে অনুভূমিকভাবে এবং উলম্বভাবে উভয়ই ডিভিডিকে কেন্দ্র করে:

$("#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>
স্নিপেট প্রসারিত করুন

( এই ফিডলটিও দেখুন )

— জন স্লেজার্স
সূত্র
0

সিএসএস সমাধান কেবল দুটি লাইনে

এটি আপনার অভ্যন্তরীণ ডিভটিকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রিক করে তুলবে।

#outer{
  display: flex;
}
#inner{
margin: auto;

}

শুধুমাত্র অনুভূমিক প্রান্তিককরণের জন্য, পরিবর্তন করুন 

margin: 0 auto;

এবং উল্লম্ব জন্য, পরিবর্তন

margin: auto 0;
— শিবম ছেত্রি
সূত্র
0

শুধু বলুন: $ ("# বিভাজক")। এইচটিএমএল ($ (''))। এইচটিএমএল ($ ("# বিভাজক")

— 1.618
সূত্র
-6

আপনি কেন একটি ডিভ কেন্দ্রীকরণের জন্য সিএসএস ব্যবহার করবেন না?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}
— আহমাদ বালভীপুর
সূত্র
2
আপনার উদাহরণে, ডিভের উপরের / বামদিকে যেখানে কেন্দ্রটি থাকার কথা।
— ক্রিস্টি মিহাই
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.