css - tutorial - w3schools sql




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

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

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

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

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


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

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

CSS

.centered{
    text-align:center;
}

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

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

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


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

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>

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

<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% কন্টেইনারের চেয়ে বড় হওয়া উচিত, তবে সেই ক্ষেত্রে আপনি কন্টেইনারের সাথে আরও বড় করতে পারেন, এবং এটি কাজ করবে


উদাহরণস্বরূপ, আমার একটি প্রবন্ধ 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..*/

}

শুভ কামনা


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


প্রথমটি আপনি বাম দিক দিয়ে এটি করতে পারেন: 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; } 

বাম: স্ট্যাটিক প্রস্থ নির্ধারিত সঙ্গে 50% কাজ researively নিকটতম পিতামাতার কাজ করে। প্রস্থ চেষ্টা করুন: 500px বা অভিভাবক ডিভ নেভিগেশন কিছু। বিকল্প হিসাবে, প্রদর্শনের কেন্দ্রটিতে আপনার প্রয়োজনীয় সামগ্রী তৈরি করুন: ব্লক করুন এবং স্বয়ংক্রিয়ে বাম এবং ডান মার্জিন সেট করুন।


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


সিএসএস

  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/


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


text-align:center; সেট text-align:center; অভিভাবক div, এবং margin:auto; সন্তানের div।

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}
<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

এই বেশিরভাগ কিছু কেন্দ্রে একটি ভাল সম্পদ।
http://howtocenterincss.com/





css