676

বৈশিষ্ট্যটি positionসেট করা আছে এমন একটি উপাদান কেন্দ্রে আমার একটি সমস্যা হচ্ছে absolute। কেউ কেন জানেন যে কেন চিত্রগুলি কেন্দ্রীভূত নয়?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

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

— user1098278
সূত্র

3

আপনার # স্লাইডশো একটি নির্দিষ্ট প্রস্থ দেওয়া দরকার ...

— ptriek

1192

আপনি যদি প্রস্থ নির্ধারণ করে থাকেন তবে আপনি ব্যবহার করতে পারেন:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

— baaroz
সূত্র

21

এটি বাকিগুলির চেয়ে অনেক ক্লিনার উত্তর! কোন সতর্কতা আছে?

— এসবিচেনকো

8

স্মার্ট উত্তর। আমি কেবল এটি যাচাই করেছি এবং এটি সমস্ত ব্রাউজারে কাজ করে। এটি আইই 8 তে কাজ করে না তবে এটি IE> = 9

— রজার

13

আই-তে পরীক্ষা করে নেওয়ার বিষয়ে নিশ্চিত হন, উপাদানটি

— IE9-

33

আমি ব্যক্তিগতভাবে বাক্য গঠনটি পছন্দ করি "মার্জিন: 0 অটো; বাম: 0; ডান: 0;"

— হেক্টর আরডোনজ

58

প্রস্থ নির্ধারণ না করা পর্যন্ত এটি বেশ সহজভাবে কাজ করে না। আপনার কাছে পাঠ্য-সারিবদ্ধকরণ: পিতামাতার কেন্দ্রবিন্দু থাকলে এবং পরম-অবস্থানিক উপাদানটির ব্যাকগ্রাউন্ড না থাকলে এটি কাজ করতে পারে but তবে এটিতে একটি পটভূমি রাখুন এবং আপনি দেখতে পাবেন এটি আসলে পুরো প্রশস্ততা নিচ্ছে। ট্রান্সলেট এক্স (-50%) উত্তরটি সঠিক।

— কোডমনকি

584

না জেনে width/ heightস্থান এর ¹ উপাদান, এটা এখনও এটা সারিবদ্ধ নিম্নরূপ সম্ভব:

এখানে উদাহরণস্বরূপ

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

এটি লক্ষণীয় যে সিএসএস ট্রান্সফর্মটি IE9 এবং এর উপরেরগুলিতে সমর্থিত । (ব্রেন্ডিটির জন্য বিক্রেতার উপসর্গগুলি বাদ দেওয়া হয়েছে)

ব্যাখ্যা

যোগ করার পদ্ধতি top/ leftএর 50%পিতা বা মাতা মাঝখানে, এবং উপাদান উপরের / বাম মার্জিন প্রান্ত প্যাচসমূহ translate()সঙ্গে ফাংশন (ঋণাত্মক) এর মান -50%প্যাচসমূহ এর আকার অর্ধেক দ্বারা উপাদান। সুতরাং উপাদানটি মাঝখানে অবস্থিত হবে।

এটি কারণ top/ leftবৈশিষ্ট্যগুলির একটি শতাংশ মান প্যারেন্ট উপাদানটির উচ্চতা / প্রস্থের সাথে সম্পর্কিত (যা একটি ব্লক তৈরি করে)।

যদিও রূপান্তর ফাংশনের একটি শতাংশের মানটি উপাদানটির প্রস্থ / উচ্চতার সাথে সম্পর্কিত (আসলে এটি বাউন্ডিং বাক্সের আকারকে বোঝায় ) ।translate()

একমুখী প্রান্তিককরণের জন্য, সাথে translateX(-50%)বা translateY(-50%)তার পরিবর্তে যান।

^{1. positionছাড়া অন্য সাথে একটি উপাদান static। অর্থাত relative, absolute, fixedমান।}

— হাশেম কুলামি
সূত্র

65

এটি শীর্ষ উত্তর হওয়া উচিত !!

— ক্রিস পাইন

3

ফ্যান্টাস্টিক! লট সেরা!

— ভার্গব পোনাপল্লী

4

আমি এর উত্তর এবং ভাল ব্যাখ্যার জন্য সর্বত্র অনুসন্ধান করেছি। এটি সেখানে সেরা উত্তর এবং একটি দুর্দান্ত ব্যাখ্যাও! ধন্যবাদ।

— মাইক

5

অনুভূমিক কেঁদ্রীকরণ: position: absolute; left: 50%; transform: translateX(-50%);, উলম্ব কেঁদ্রীকরণ: position: absolute; top: 50%; transform: translateY(-50%);।

— 21 Ван

1

ঠিক এখন আমি সেই translateসম্পত্তিটি পেয়েছি , উপাদানটিকে নিজের আকার দ্বারা অনুবাদ করুন , এটির পিতামাতার কোনও ব্যাপার নয়।

— ফারজিন কানজি

185

লাই absoluteপজিশনের কিছু কেন্দ্রীভূত করা বরং সিএসএসে বিশৃঙ্খলাযুক্ত।

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

margin-leftআপনি যে উপাদানটিকে কেন্দ্র করার চেষ্টা করছেন তার অর্ধ প্রস্থে (নেতিবাচক) পরিবর্তন করুন ।

— bookcasey
সূত্র

5

এটি পরীক্ষা করার সময় এটি কাজ করে না যখন চিত্রগুলি বিভিন্ন আকারের হয় এবং তারা এখনও একে অপরকে

— রায়ান গিবনস

3

খুব হ্যাক-ইশ (এটি প্রায়শই সিএসএস সহ সক্রিয় হয়)। তবে দুর্দান্ত! :-)

— ড.কামেলিয়ন

1

আমি অন্য কিছু উত্তরগুলির চালাকতার দ্বারা প্রলুব্ধ হয়েছি, তবে কেবল এটিই আমার পক্ষে নির্ভরযোগ্য।

— ক্রিস শিফহায়ের

রায়ান এর মতো আমারও একই সমস্যা ছিল, তাই আমি "বারোজ" দ্বারা প্রস্তাবিত দ্বিতীয় উত্তরটি চেষ্টা করেছিলাম এবং এটি আমার পক্ষে কাজ করেছে !!! এবং এটি বিভিন্ন রেজোলিউশনকেও সমর্থন করে, যেহেতু আমার মূল ডিআইভির প্রস্থ% এবং

— ইউআইডি

এটি আসলে কেন্দ্রিক নয়। এটি ডানদিকে আরও অবস্থিত

— আর্টসিকাল

81

ডিভটি উল্লম্ব এবং অনুভূমিকভাবে সারিবদ্ধ কেন্দ্র

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

দ্রষ্টব্য: উপাদানগুলির প্রস্থ এবং উচ্চতা নির্ধারণ করা উচিত

— সেবিন সাইমন
সূত্র

1

আমি জানি না কেন এটি বেশি ভোট দেয় না। আমি যতটা বলতে পারি মোবাইল ব্রাউজার সহ সমস্ত ব্রাউজারগুলিতে কাজ করে। সমর্থন শর্তাবলী আরও নির্ভরযোগ্য Seams। এটি সহজ, সহজ এবং পরিষ্কার ...

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

1

এটি একটি ভাল উত্তর। এটির জন্য কেবল একটি ডিভ প্রয়োজন এবং বামে কল করার চেয়ে বেশি ব্যবহারের কেস রয়েছে: 50% ;, শীর্ষ: 50%; 69+ ভোটের সাথে সমাধানটির মতো

— ইয়ান এস

এখন পর্যন্ত সেরা উত্তর, যে কেউ এখানে আসবে এটি পরীক্ষা করা উচিত!

— আবদো আদেল

3

heightএটি কাজ করার জন্য উপাদানটিরও একটি সেট প্রয়োজন ।

— অ্যালেক্সবুটস

55

একটি সাধারণ সিএসএস কৌশল, কেবল যুক্ত করুন:

width: 100%;
text-align: center;

এটি চিত্র এবং পাঠ্য উভয় ক্ষেত্রেই কাজ করে।

— cutez7boyz
সূত্র

48

আপনি যদি একটি নিখুঁত উপাদান কেন্দ্র করতে চান

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

আপনি যদি চান যে কোনও ধারক বাম থেকে ডানদিকে কেন্দ্রিক হতে পারে তবে উপরে থেকে নীচে না

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

আপনি যদি চান যে কোনও পাত্রে উপরে থেকে নীচে কেন্দ্রিক হওয়া উচিত, বাম থেকে ডানদিকে নির্বিশেষে

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

15 ডিসেম্বর, 2015 হিসাবে আপডেট

ভাল আমি কয়েক মাস আগে এটি আরও একটি নতুন কৌশল শিখেছি। ধরে নিচ্ছি যে আপনার কাছে পিতামাতার একটি আপেক্ষিক উপাদান রয়েছে।

এখানে আপনার পরম উপাদান যায়।

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

এটি দিয়ে আমি আমার পুরানো সমাধানের চেয়ে উত্তম উত্তর বলে মনে করি। যেহেতু আপনাকে প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে হবে না। এটি এটি উপাদানটির সামগ্রীকেই খাপ খায়।

— ওয়েসলি ব্রায়ান লাচেনাল
সূত্র

36

একটি "অবস্থান: নিখুঁত" উপাদানকে কেন্দ্র করে।

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

— Vadamadafaka
সূত্র

32

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

position: absolute;
left: 50%;
transform: translateX(-50%);

— Deplake
সূত্র

27

কেন্দ্র এএ অবস্থান: নিখুঁত গুণাবলী আপনাকে বাম সেট করতে হবে: 50% এবং মার্জিন-বাম: - ডিভের প্রস্থের -50%।

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

উল্লম্ব কেন্দ্রের পরম জন্য আপনাকে একই জিনিসটি কুঁড়িটি করতে হবে কেবল শীর্ষে বাম দিকে নয়। (দ্রষ্টব্য: এইচটিএমএল এবং দেহের অবশ্যই ন্যূনতম উচ্চতা 100% থাকতে হবে)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

এবং উভয় জন্য একত্রিত করা যেতে পারে

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

— Rednas
সূত্র

16

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

ডেমোটি দেখুন: http://jsfiddle.net/ মোহাম্মদদায়েহ / এইচআরজেডসিএল

text-align: center; position: absoluteযোগ করার সময় একটি উপাদান সঙ্গে কাজ করেleft: 0; right: 0;

— মোহাম্মদ দাহেহ
সূত্র

2

এই কোডটি কেন কাজ করে তার পিছনে কোনও ধরণের ভাষ্য বা যুক্তি সরবরাহ করুন। কোডের উত্তরগুলি এগুলি মুছে ফেলার জন্য অনিবার্যভাবে পতাকাঙ্কিত হবে।

— রাইরিং

14

সহজ, সেরা:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

তারপরে আপনার নিজের ইমগ ট্যাগটি এমন একটি ট্যাগে inোকানো দরকার যা স্পোর্টস অবস্থান: আপেক্ষিক সম্পত্তি, নীচে:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

— স্টাফেন ডি লুকা
সূত্র

8

সম্ভবত সবচেয়ে ছোট

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

— Cris
সূত্র

1

এটি বেশ দুর্দান্ত তবে কেবল উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্র করতে আমাদের কেবল মার্জিন অটো তৈরি করতে হবে

— সন্তোষ

7

আপনি যদি উপাদানটির প্রস্থ না জানেন তবে আপনি এই কোডটি ব্যবহার করতে পারেন:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

ডালাগুলিতে ফিডল: http://jsfiddle.net/wrh7a21r/

সূত্র: https://stackoverflow.com/a/1777282/1136132

— joseantgv
সূত্র

@ নবীকে.এজেড এই উপাদানটি কার্যকর যদি আপনি উপাদানটির প্রস্থ না জানেন। আপনার উদাহরণে আপনি ডিভের প্রস্থ নির্ধারণ করেছেন set

— joseantgv

7

অথবা আপনি এখন পজিশন পরম সঙ্গে ফ্লেক্স বক্স ব্যবহার করতে পারেন:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

— সেবাস্তিয়ান থমাস
সূত্র

এটি তাই আন্ডাররেটেড হয়।

— সিজে 21x

5

আপনি কী অর্জন করতে চান তা আমি নিশ্চিত নই, তবে এক্ষেত্রে width: 100%;আপনার ul#slideshow liইচ্ছার সাথে কেবল যুক্ত করার চেষ্টা করুন।

ব্যাখ্যা

imgট্যাগ ইনলাইন-ব্লক উপাদান। এর অর্থ হ'ল এগুলি পাঠ্যের মতো ইনলাইন প্রবাহিত হয় তবে ব্লক উপাদানগুলির মতো প্রস্থ এবং উচ্চতাও রয়েছে। আপনার CSS এ দুই আছে text-align: center;নিয়ম প্রয়োগ <body>করুন এবং #slideshowWrapper(যা BTW অপ্রয়োজনীয়) এই সব ইনলাইন এবং ইনলাইন-ব্লক শিশু উপাদান তাদের নিকটতম ব্লক উপাদানের মধ্যে কেন্দ্রীভূত করা সহজ করে তোলে, আপনার কোডে এগুলো liট্যাগ। সমস্ত ব্লকের উপাদানগুলির width: 100%যদি সেগুলি স্থিতিশীল প্রবাহ ( position: static;) হয় তবে এটি ডিফল্ট। সমস্যাটি হ'ল আপনি liট্যাগগুলি বলার সময় position: absolute;, আপনি এগুলি স্বাভাবিক স্থির প্রবাহের বাইরে নিয়ে যান এবং এর ফলে তাদের আকারটি কেবলমাত্র তাদের অভ্যন্তরীণ সামগ্রীতে ফিট করে, অন্যথায় তারা তাদের width: 100%সম্পত্তি "হারান" ।

— কনস্ট্যান্টিন কালবাজভ
সূত্র

5

ব্যবহার left: calc(50% - Wpx/2);যেখানে ওয়াট উপাদান প্রস্থ আমার জন্য কাজ করে।

— Julix
সূত্র

আপনি ডাব্লু কীভাবে নির্ধারণ করবেন?

— Purplejacket

তিনি "একটি চিত্র" বলেছেন - আদর্শভাবে ওয়েবে ছবিগুলি তৈরি করার সময় অপ্রয়োজনীয় ওজন এড়াতে আপনি যে আকারটি ব্যবহার করতে যাচ্ছেন (এটি পরিবর্তিত করার পরিবর্তে) ব্যবহার করার কথা ভাবা হচ্ছে (যদি আপনি একটি বিশাল চিত্র তৈরি করেন তবে ছোট) বা অস্পষ্টতা (যদি আপনি একটি ছোট চিত্রকে বড় করেন)। - আপনি যদি jQuery ব্যবহার করেন এবং গতিশীলভাবেও স্টাইল করেন তবে আপনি "ইমেজএলিমেন্ট.নোচারালহাইট" এবং "ইমেজএলিমেন্ট.এনচারালউইথ" ব্যবহার করতে পারেন তবে এটি কিছুটা জটিল হয়ে উঠছে। ন্যায়সঙ্গত হওয়ার জন্য, অন্যান্য উত্তরগুলিরও অনেকগুলি আপনাকে তাদের কৌশলটি কাজ করার জন্য প্রস্থের প্রস্থটি জানতে হবে।

— জুলিক্স

যদিও আপনি কীভাবে ডাব্লু পাবেন তা সম্পর্কে অস্পষ্ট থাকলে, ক্রোমে আপনি সিটিআরএল + শিফট + আই (বিকাশকারী সরঞ্জাম) ব্যবহার করতে পারেন, তারপরে উপাদানগুলির উপর নজর রাখার জন্য সিটিআরএল + শিফট + সি (পরিদর্শন মোড) ব্যবহার করতে পারেন এবং কীভাবে প্রশস্ত জিনিস রয়েছে তা দেখুন। আপনি এটি কত প্রশস্ত হতে চান তাও ঠিক করতে পারেন এবং আপনার CSS এ "প্রস্থ: Wpx" যুক্ত করতে পারেন।

— জুলিক্স

4

আপনার চিত্রগুলি কেন্দ্রিক নয় কারণ আপনার তালিকার আইটেমগুলি কেন্দ্রিক নয়; শুধুমাত্র তাদের পাঠ্য কেন্দ্রিক। আপনি পুরো অবস্থানটি কেন্দ্র করে বা তালিকার মধ্যে থাকা চিত্রগুলি কেন্দ্র করে আপনি যে অবস্থানটি চান তা অর্জন করতে পারেন।

আপনার কোডের একটি সংশোধিত সংস্করণ নীচে পাওয়া যাবে। আমার সংশোধনীতে আমি তালিকা এবং এর মধ্যে থাকা চিত্রগুলি উভয়কেই কেন্দ্র করি।

সত্য কথাটি আপনি এমন কোনও উপাদানকে কেন্দ্র করতে পারবেন না যেটির অবস্থান নিখুঁতভাবে সেট করা আছে।

তবে এই আচরণ অনুকরণ করা যায়!

দ্রষ্টব্য: এই নির্দেশাবলী কেবল img নয়, যে কোনও DOM ব্লক উপাদানের সাথে কাজ করবে।

আপনার চিত্রটি একটি ডিভি বা অন্যান্য ট্যাগ দিয়ে ঘিরে (আপনার ক্ষেত্রে একটি লি) li
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
দ্রষ্টব্য: এই উপাদানগুলিতে প্রদত্ত নামগুলি বিশেষ নয়।

ডিভিটি সম্পূর্ণরূপে অবস্থান এবং আপনার চিত্র কেন্দ্রিক দিতে আপনার সিএসএস বা স্কেস পরিবর্তন করুন।

.absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

এবং সেখানে আপনি এটা আছে! আপনার আইএমজি কেন্দ্রিক করা উচিত!

তোমার গোপন সংকেত:

এটি ব্যবহার করে দেখুন:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

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

আশা করি এটা উপকারে এসেছিল। শুভকামনা!

— D3RPZ1LLA
সূত্র

3

আপেক্ষিক বস্তুর ভিতরে একটি নিখুঁত বস্তু তার পিতামাতার সাথে সম্পর্কিত, এখানে সমস্যা হ'ল আপনার ধারকটির জন্য একটি স্ট্যাটিক প্রস্থ প্রয়োজন #slideshowWrapperএবং বাকী সমাধানটি অন্যান্য ব্যবহারকারীদের মতো বলে

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

— eveevans
সূত্র

দুটি ছবি একে অপরকে সজ্জিত হিসাবে আপনার মূর্খতা।

— রায়ান গিবনস

3

"অবস্থান: নিখুঁত" সহ কেন্দ্রের উপাদানগুলির জন্য এখানে সহজ এবং সর্বোত্তম সমাধান Here

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

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

— SantoshK
সূত্র

2

আপনি এইভাবে চেষ্টা করতে পারেন:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

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

— চিরাগ দাভে
সূত্র

1

স্থিতি স্থিতিস্থাপক এটিকে প্রবাহের বাইরে নিয়ে যায় এবং 0x0 এ প্যারেন্টের কাছে রাখে (সর্বশেষ ব্লকের উপাদানটির সাথে স্থিতিশীল অবস্থান বা অবস্থান সম্পর্কিত))

আমি নিশ্চিত না আপনি ঠিক কী অর্জন করতে চাইছেন, আপনি লিটি সেট করা সবচেয়ে ভাল position:relativeএবং এটি তাদের কেন্দ্র করে দেবে। আপনার বর্তমান সিএসএস দেওয়া হয়েছে

এটির সাথে খেলতে http://jsfiddle.net/rtgibbons/ejRTU/ দেখুন

— রায়ান গিবনস
সূত্র

: / শেষে আপনার মত প্রায় একই সমাধান ... <আপ ভোট

— ইভিওয়ানস

1

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

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

আমি যখন উপরে থেকে সংমিশ্রণটি ব্যবহার করি তখন চিত্রটি নীচের সেটিংসের সাথে একটি পটভূমি-চিত্রের মতো আচরণ করে:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

প্রথম উদাহরণ সম্পর্কে আরও বিশদ এখানে পাওয়া যাবে:
সিএসএসের সাথে একটি ডিভের দিক অনুপাত বজায় রাখুন

— Marian07
সূত্র

0

যা ঘটছে বলে মনে হচ্ছে তার দুটি সমাধান রয়েছে; মার্জিন ব্যবহার করে কেন্দ্রিক এবং অবস্থান ব্যবহার করে কেন্দ্রিক। উভয়ই সূক্ষ্মভাবে কাজ করে, তবে আপনি যদি এই কেন্দ্রিক উপাদানটির সাথে সম্পর্কিত কোনও উপাদানকে নিখুঁত অবস্থান করতে চান তবে আপনাকে অবশ্যই পরম অবস্থান পদ্ধতিটি ব্যবহার করা দরকার কারণ দ্বিতীয় মৌলের স্থিত অবস্থানটি প্রথম পিতামাতার কাছে ডিফল্ট। তাই ভালো:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

মার্জিন: 0 অটো টেকনিক ব্যবহার করে এই পোস্টিংটি পড়া না হওয়া অবধি আমার কন্টেন্টের বামে একটি মেনু তৈরি করতে আমাকে সামঞ্জস্য করার জন্য ডানদিকে একই প্রস্থের কলাম তৈরি করতে হয়েছিল। সুন্দর না. ধন্যবাদ!

— ডিন নেটলেটস
সূত্র

0

margin-left: x%;X যেখানে এলিমেন্টের প্রস্থের অর্ধেক সেখানে ব্যবহার করুন ।

— বিবাসওয়ান বন্দ্যোপাধ্যায়
সূত্র

-1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

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

— antelove
সূত্র

1

এই উত্তরের কেবল কোড রয়েছে। যদিও এটি সঠিক হতে পারে, তার কোডটি কেন ওপি-র প্রশ্নের উত্তর দেয় তা নিয়ে একটি যুক্তিযুক্ত ব্যাখ্যা থাকা উচিত। কোড স্ট্যাক এক্সচেঞ্জের "স্ব-ব্যাখ্যা" নয়।

— JBH

একটি "অবস্থান: নিখুঁত" উপাদানকে কীভাবে কেন্দ্র করবেন

ব্যাখ্যা

ব্যাখ্যা

তবে এই আচরণ অনুকরণ করা যায়!

এবং সেখানে আপনি এটা আছে! আপনার আইএমজি কেন্দ্রিক করা উচিত!

তোমার গোপন সংকেত: