css w3schools সিএসএস: একটি<div> উপাদান মধ্যে কেন্দ্র উপাদান




w3schools sql (15)

একটি এইচটিএমএল উপাদান কেন্দ্র করতে আমি সিএসএস ব্যবহার করতে পারি left: 50%; । যাইহোক, এই পুরো উইন্ডো সম্মান সঙ্গে উপাদান কেন্দ্র করে।

আমার একটি উপাদান আছে যা <div> উপাদানটির একটি শিশু এবং আমি এই অভিভাবকের প্রতি শ্রদ্ধা জানাতে চাই <div> , পুরো উইন্ডো নয়।

আমি কন্টেইনার <div> সমস্ত সামগ্রী কেন্দ্র করে রাখতে চাই না, শুধুমাত্র একটি নির্দিষ্ট শিশু।

আমি এটা কিভাবে করবো?


আপনি যদি CSS3 ব্যবহার করতে চান:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

আপনি আপনার উপাদান এর প্রস্থ মাপ শতাংশ পেতে কিভাবে আরো অনুসন্ধান করতে চান হতে পারে।


আপনি যদি একটি ডিভির ভিতরে উপাদানগুলিকে কেন্দ্র করতে চান এবং বিভাগের আকারের যত্ন না করেন তবে আপনি ফ্লেক্স পাওয়ার ব্যবহার করতে পারেন। আমি ফ্লেক্স ব্যবহার পছন্দ করি এবং উপাদানগুলির জন্য সঠিক আকার ব্যবহার করি না।

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

আপনি দেখতে পারেন বাহ্যিক div হল ফ্লেক্স কন্টেইনার এবং অন্তরের ফ্লেক্সের সাথে নির্দিষ্ট করা আবশ্যক যা ফ্লেক্সের সাথে নির্দিষ্ট flex: 1 1 auto; ভাল বোঝার জন্য আপনি এই সহজ নমুনা দেখতে পারে। http://jsfiddle.net/QMaster/hC223/

এই সাহায্য আশা করি।


আসলে এই CSS3 ফ্লেক্স বক্স সঙ্গে খুব সহজবোধ্য।

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}
<div class="flex-container">
  <div class="inner-element"></div>
</div>

হালনাগাদ:

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

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}
<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>


উদাহরণস্বরূপ, আমার একটি প্রবন্ধ div আছে যা একটি মূল বিষয়বস্তু div এর ভিতরে রয়েছে .. নিবন্ধের অভ্যন্তরে একটি চিত্র রয়েছে এবং সেই চিত্রের অধীনে একটি বাটন, এটির মতো শৈলী:

.article {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

}। carticle {

}

/ * প্রবন্ধের ভিতরে আমি ছবিটি কেন্দ্রীভূত করতে চাই * /

.article img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/ * এখন এই চিত্রের অধীনে একই নিবন্ধ উপাদানটিতে একটি বোতাম থাকতে হবে যেমন আরও পড়তে হবে অবশ্যই অবশ্যই এটির সাথে একটি প্রতিক্রিয়াশীল ডিজাইনের ভিতরে * যখন%

.button {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

শুভ কামনা


আমি অন্য সমাধান পাওয়া গেছে

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

এবং শরীরের মধ্যে

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

যখনই আপনার ধারক বড় বা ছোট হয় তখন এটি আপনার সামগ্রী বিভাগকে কেন্দ্র করবে। এই ক্ষেত্রে আপনার সামগ্রী কেন্দ্রীভূত না হওয়া পর্যন্ত 1100% কন্টেইনারের চেয়ে বড় হওয়া উচিত, তবে সেই ক্ষেত্রে আপনি কন্টেইনারের সাথে আরও বড় করতে পারেন, এবং এটি কাজ করবে


এই পোস্টটি একটি ভাল সমাধান প্রদান করে - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/ মূলতঃ 1. সন্তানের অবস্থানকে সম্পূর্ণরূপে সেট করুন। 2. আপেক্ষিক অবস্থানে অভিভাবক সেট করুন। 3. শিশুর বাম এবং শীর্ষ 50% সেট করুন। 4. শিশু উপাদান অর্ধেক প্রস্থ দ্বারা বাম এবং শীর্ষ স্থানান্তর (-50%, - 50%) অনুবাদ।


আপনার উপাদানটি কেন্দ্রের জন্য একটি নতুন ডিভি উপাদান তৈরি করুন, তারপরে এমন উপাদানটি কেন্দ্রীভূত করার জন্য বিশেষভাবে একটি শ্রেণী যোগ করুন

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

CSS

.centered{
    text-align:center;
}

আমার জাদু চাই।

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>

সিএসএস

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

এইচটিএমএল

<div class="divWrapper">Tada!!</div>

এই div কেন্দ্র করা উচিত

2016 - HTML5 + CSS3 পদ্ধতি

সিএসএস

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

এইচটিএমএল

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/


ডিভি একটি নির্দিষ্ট প্রস্থ বা একটি তরল প্রস্থ হয়? তরল প্রস্থের জন্য আপনি যে কোনও উপায়ে ব্যবহার করতে পারেন:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

অথবা আপনি পিতা text-align:center; মাতা DIV text-align:center; এবং সন্তানের div text-align:left;

এবং left:50%; যখন ডিভিটি position:absolute; জন্য সেট করা হয় তখন কেবলমাত্র পুরো পৃষ্ঠা অনুসারে এটি কেন্দ্র করে position:absolute; । আপনি left:50%; সেট যদি left:50%; এটি পিতামাতার DIV এর প্রস্থ আপেক্ষিক এটি করা উচিত। নির্দিষ্ট প্রস্থের জন্য এটি করুন:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

শুধু অভিভাবক ডিভি position: relative দিতে position: relative


text-align:center; অভিভাবক div উপর কৌতুক করা উচিত


প্রথমটি আপনি বাম দিক দিয়ে এটি করতে পারেন: 50% এটি পিতামাতার ডিভিকে আপেক্ষিকভাবে কেন্দ্রীভূত করতে পারে তবে এর জন্য আপনাকে CSS অবস্থান পঠন করতে হবে।

অনেক থেকে এক সম্ভাব্য সমাধান মত কিছু করতে হয়

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

যদি আপনার ডিভিকে কেন্দ্রীভূত করা হয় তুলনামূলকভাবে, আপনি ঠিক করতে পারেন

    .mydiv { position:relative; margin:0 auto; } 

text-align: center; বরাদ্দ text-align: center; পিতা বা মাতা এবং display: inline-block; ডিভি যাও।


যদি শিশু উপাদানটি ইনলাইন হয় (উদাহরণস্বরূপ কোন div , table ইত্যাদি না) আমি এটি একটি div বা p ভিতরে মোড়ানো করব এবং রেপারের পাঠ্যকে CSS সমৃদ্ধ সমৃদ্ধ কেন্দ্রটিকে সমান করে তুলব।

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

অন্যথা, যদি উপাদান একটি নির্দিষ্ট প্রস্থ সহ একটি ব্লক ( display: block , উদাহরণস্বরূপ একটি div বা p ) হয়, আমি তার মার্জিন বাম এবং ডান CSS বৈশিষ্ট্যাবলী স্বয়ং সেট করব।

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

আপনি অবশ্যই একটি text-align: center করতে পারেন: তার বিষয়বস্তুকে কেন্দ্রীভূত করতে র্যাপার উপাদানতে কেন্দ্রটি।

আমি পজিশনিং নিয়ে বিরক্ত হব না কারণ আইএমএইচও OPS সমস্যাটির জন্য যেতে পারে না তবে এই লিংকটিকে খুব সহায়ক বলে চেক করতে ভুলবেন না।





css