সিএসএস: <ডিভ> উপাদানের মধ্যে কেন্দ্রের উপাদান

Question

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

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

আমি ধারক চাই না <div>আছে সব তার কন্টেন্ট কেন্দ্রিক, মাত্র এক নির্দিষ্ট সন্তান।

Answer 1

সেট 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/

Comments

হুম ... আমি চাই না পুরো পিতামাতা ডিভকে কেন্দ্রিক পাঠ্য থাকতে হবে। যদিও এটি সমস্যার সমাধান করে, এটি অন্যটি তৈরি করে!

— রেন্ডোম্বলিউ

আপনি পাঠ্য-সারিবদ্ধ সেট করতে পারেন: বাম; শিশু উপাদান থেকে, পাঠ্য সঠিকভাবে প্রান্তিককরণ করতে।

— প্যাসাইন

@ পাসাইন text-alignকোনও <i>উপাদানটিতে কাজ করছে বলে মনে হয় না । এটি একটি শ্রেণি প্রদান করে ..

— nclsvh

এই কেন্দ্রটিকে অনুভূমিক পাশাপাশি পাশাপাশি অনুভূমিকভাবে তৈরি করার কোনও উপায় আছে কি?

— Gman স্মিথ

@GmanSmith আপনি এটি ব্যবহার করতে পারেন display: table-cellবা এর flexboxজন্য। আমি যোগ করা লিঙ্কটি একবার দেখুন।

— প্যাসিন

Answer 2

আসলে এটি 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>

Answer 3

সিএসএস

  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>

এটি ডিভকে কেন্দ্র করা উচিত

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/

Comments

তবে এটি পুরো শরীরকেও কেন্দ্র করে, তাই না?

— র্যান্ডমব্লু

আচ্ছা, যা ডিভ্র্যাপারে থাকবে তা হ্যাঁ কেন্দ্রিক হবে তবে আপনি সেই ডিভের বাইরে কিছু রাখতে পারেন এবং আপনি চাইলে এটি কেন্দ্রীভূত হবে না।

— ওয়ারফেস

সস্তার প্রস্থ (960px) বেশিরভাগ দৃশ্যের জন্য উপযুক্ত নয়।

— কিউমাস্টার

@ কি মাস্টার আমি জানি এই পোস্টটি পুরানো, আমার এটিতে এইচটিএমএল 5 পাওয়ার সাথে আপডেট করা উচিত

— ওয়ারফেস

এখানে একটি ভাল ব্যাখ্যা আছে: w3.org/Style/Eesample/007/center.en.html

— Purplejacket

Answer 4

text-align:center; অভিভাবক ডিভ উপর কৌশলটি করা উচিত

Comments

এটি যে পাঠ্যটি আমি সারিবদ্ধ করতে চাই তা নয়, এটি সম্পূর্ণ উপাদান (যেমন একটি বোতাম)।

— র্যান্ডমব্লু

যদি এটি ডিভিতে থাকে তবে এটি কেন্দ্রটি সারিবদ্ধ করবে, ব্লক উপাদানগুলির জন্য এটি সামান্য কৌশলযুক্ত হতে পারে।

— কেভিন বোয়ারক্সক্স

Answer 5

শুধুমাত্র নির্দিষ্ট শিশুকে কেন্দ্র করতে:

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>  

বা, আপনি ফ্লেক্সও ব্যবহার করতে পারেন তবে এটি সমস্ত শিশুকে কেন্দ্র করে

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}

<div class="parent">
   <span class="child">hi</span>
</div>

Answer 6

আপনি বুটস্ট্র্যাপ ফ্লেক্স শ্রেণীর নামটি এর মতো ব্যবহার করতে পারেন:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

এটি অভ্যন্তরের সংখ্যার সাথেও কাজ করবে।

Answer 7

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

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

অথবা আপনি পিতামাতাকে ডিভ text-align:center;এবং সন্তানের ডিভকে সেট করতে পারেনtext-align:left; ।

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

#parent {
width:500px;
}

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

Answer 8

শুধু পিতামাতাকে দিন position: relative

Answer 9

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

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

আপনার উপাদানটির প্রস্থের ফিটনেস কীভাবে পাওয়া যায় তা নির্ধারণ করতে আপনি আরও অনুসন্ধান করতে চাইতে পারেন।

Answer 10

প্রথমে আপনি বাম দিয়ে এটি করতে পারেন: প্যারেন্ট ডিভের তুলনায় এটি কেন্দ্র করতে 50% তবে এর জন্য আপনাকে সিএসএস পজিশনিং শিখতে হবে।

অনেকের একটি সম্ভাব্য সমাধান হ'ল এর মতো কিছু করা

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

Comments

আমি চাই না পুরো পিতামাতার text-align:center;

— ডিভ হোক

আপনি চান না কেন? যাইহোক যে ক্ষেত্রে আপনি দ্বিতীয় পদ্ধতির ব্যবহার করতে পারে।

— এহতেশাম

Answer 11

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

Answer 12

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

    <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) হয় তবে আমি এর মার্জিন বাম এবং ডান সিএসএস বৈশিষ্ট্যগুলিকে অটোতে সেট করব।

    <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এর বিষয়বস্তুকে কেন্দ্রিক করে তোলার জন্য মোড়কের উপাদানটিতে একটি যুক্ত করতে পারেন।

আমি অবস্থান নিয়ে বিরক্ত করব না কারণ আইএমএইচও এটি ওপিএস সমস্যার সমাধানের উপায় নয় তবে এই লিঙ্কটি পরীক্ষা করে দেখুন, খুব সহায়ক।

Answer 13

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

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

CSS

.centered{
    text-align:center;
}

Answer 14

আমি আরও একটি সমাধান খুঁজে পেয়েছি

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

Answer 15

text-align: center;পিতামাতাকে এবং বিভাগকে বরাদ্দ করুন display: inline-block;।

Answer 16

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

.কণা {

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

art।

}

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

.article img

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

}

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

.বাটন {

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

}

শুভকামনা

Answer 17

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

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

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

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

Answer 18

আমার যাদু চাই

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>

Answer 19

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>

Comments

কোড সর্বদা ভাল তবে এটি কীভাবে আসল প্রশ্নটিকে সম্বোধন করে সে সম্পর্কে কিছু মন্তব্য / প্রসঙ্গ যুক্ত করতে সহায়তা করে।

— ক্রেগকৌলফিল্ড