পৃষ্ঠাটি যখন স্ক্রিনের চেয়ে বড় হয় তখন কীভাবে পর্দার মধ্যভাগে একটি ডিভ স্থাপন করতে হয়

141

হাই, আমি পর্দার মাঝখানে একটি ডিভ অবস্থান নিতে নিম্নলিখিতগুলির সাথে সামঞ্জস্যপূর্ণ কিছু ব্যবহার করছি:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

তবে এটির সাথে সমস্যা হ'ল এটি পৃষ্ঠার মাঝখানে আইটেমটি পর্দা নয়। সুতরাং পৃষ্ঠাটি যদি কয়েকটি স্ক্রিন উচ্চ হয় এবং আমি পৃষ্ঠার শীর্ষে থাকি (অংশটির শীর্ষ অংশটি স্ক্রিনে প্রদর্শিত হয়) আমি যখন ডিভটি প্রদর্শিত করি তা এমনকি স্ক্রিনেও নয়। এটি দেখতে আপনাকে নীচে স্ক্রোল করতে হবে।

কেউ দয়া করে আমাকে কীভাবে বলতে পারেন আপনি কীভাবে এটি পর্দার মাঝখানে প্রদর্শিত করবেন?

— কোডার 2
সূত্র

আমি ঠিক একটি পরীক্ষার পৃষ্ঠায় সেই সঠিক কোডটি পরীক্ষা করেছিলাম এবং এটি পৃষ্ঠায় পুরোপুরিভাবে ডিভকে কেন্দ্র করেছিলাম, এমনকি <br />চেষ্টা করার চেষ্টা করে এটি নীচে নামানোর আগে প্রায় 100 টি ছিল। আপনার বাকী কোডটি পরীক্ষা করে দেখুন আপনার কাছে এমন কোনও কিছু রয়েছে যা ডিআইভির মানগুলি বেশি লিখেছেন বা আপনার ডিআইভিকে এই সমস্যার কারণ হিসাবে প্রভাবিত করছে কিনা তা দেখার জন্য।

— এলি

269

কেবল যুক্ত করুন position:fixedএবং এটি নীচে স্ক্রোল করে থাকলেও এটি নজরে রাখবে। এটি http://jsfiddle.net/XEUbc/1/ এ দেখুন

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

— হুসাইন
সূত্র

1

আপনি জীবন রক্ষাকারী .. উপাদান সমাধান রূপান্তর স্কেল প্রয়োগ করা হয়েছে এমনকি যদি সহজ সমাধান ভাল কাজ করে ..

— Vinnie

91

আমি মনে করি এটি একটি সহজ সমাধান:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

স্নিপেট প্রসারিত করুন

— user2684935
সূত্র

7

এই পদ্ধতির অনুমোদিত উত্তরের চেয়ে অনেক বেশি ভাল

— ভাইচাসলভ ডব্রোমিস্লোভ

2

এটি পছন্দ করে তবে এটি "পুরানো" ব্রাউজারে কাজ করে?

— বার্নামারিয়ানো

14

রূপান্তর ব্যবহার করুন;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

জাভাস্ক্রিপ্ট সমাধান:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

— এরদোগান
সূত্র

5

শুধু রাখি margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

5

আর একবার চেষ্টা কর.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— চন্দন শর্মা
সূত্র

1

আমি মনে করি এটি আরও কার্যকর 'কুউজ আপনার পিতামাতার উপাদানগুলিতে কোনও স্টাইল প্রয়োগ করার দরকার নেই।

— ক্যানব্যাক্স

3

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

এটি আমার পক্ষে কাজ করেছে

— আব্রাহাম
সূত্র

2

যদিও এটি প্রযুক্তিগতভাবে সঠিক হতে পারে, আপনি কেন এই প্রসঙ্গে সমস্যার সমাধান করেন তার একটি সংক্ষিপ্ত বিবরণ অন্তর্ভুক্ত করতে চান

— ড্রিলেল

2

সংক্ষিপ্ত উত্তর, কেবল যুক্ত করুন position:fixedএবং এটি আপনার সমস্যার সমাধান করবে

— পার্থ
সূত্র

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— মৈত্রে মালভে
সূত্র

সাক্ষাত্কারে আমাকে প্রশ্ন জিজ্ঞাসা করা হয়েছিল "আপনি কীভাবে স্ক্রিনের

— ডিভ সেন্টারটি

1

ঠিক আছে, নীচে এটির জন্য কার্যকারী উদাহরণ।

আপনি ওয়েবপৃষ্ঠাকে পুনরায় আকার দিন বা কোনও আকারে লোড করলে এটি কেন্দ্রের অবস্থান পরিচালনা করবে।

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

স্নিপেট প্রসারিত করুন

উপরে নমুনা লোডিং ডিভ সবসময় কেন্দ্রে থাকবে।

এটি আশা করা আপনাকে সহায়তা করবে :)

— বিকাশ পান্ডে
সূত্র

1

স্ক্রিনের মাঝামাঝি বা এর প্যারেন্ট ট্যাগের মাঝখানে ট্যাগ স্থাপনের দুটি উপায়:

অবস্থানগুলি ব্যবহার:

পিতা বা মাতা ট্যাগ সেট positionকরতে relative(যদি লক্ষ্য ট্যাগ একটি পিতা বা মাতা ট্যাগ আছে) এবং তারপর ভালো লক্ষ্য ট্যাগ শৈলী সেট:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ফ্লেক্স ব্যবহার:

অভিভাবক ট্যাগ শৈলীর মতো দেখতে হবে:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— অ্যালেক্স জলিগ
সূত্র

0

আপনার স্ক্রিপ্ট পৃষ্ঠায় ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

ডিভিতে একটি মধ্যবিত্ত শ্রেণি ব্যবহার করুন ...

   <div class="a-middle">

— অ্যান্টনি জ্যাক
সূত্র

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

স্নিপেট প্রসারিত করুন

— লং মিন
সূত্র

-1

ফ্লেক্স ব্যবহার করা হচ্ছে

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— আছির থেরানস রাজা এম
সূত্র

এটি পর্দা নয়, মূল উপাদান বা পৃষ্ঠায় বিষয়বস্তু কেন্দ্র করে।

— শন

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— LukASh
সূত্র

কিছু ব্যাখ্যা যুক্ত করুন

— পঙ্কজ মাকওয়ানা

-4

এর জন্য আপনাকে পর্দার আকার সনাক্ত করতে হবে। সিএসএস বা এইচটিএমএল দিয়ে এটি সম্ভব নয়; আপনার জাভাস্ক্রিপ্ট দরকার। উইন্ডো বৈশিষ্ট্যগুলিতে মোজিলা বিকাশকারী কেন্দ্রের এন্ট্রি এখানে https://developer.mozilla.org/en/DOM/window#Properties

সেই অনুযায়ী উপলব্ধ উচ্চতা এবং অবস্থান সনাক্ত করুন।

— স্কট র‌্যাডক্লিফ
সূত্র