কিভাবে একটি ডিভ মধ্যে একটি বোতাম কেন্দ্র?

Question

আমার একটি ডিভ রয়েছে যার প্রস্থটি 100%।

আমি এর মধ্যে একটি বোতাম কেন্দ্র করতে চাই, আমি এটি কীভাবে করব?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

Comments

আপনি বোতামটির জন্য যে কোডটি ব্যবহার করছেন তা কী?

— ডেভিড এনগুইন

আমি সন্দেহ করি যে তিনি উভয় উল্লম্ব এবং অনুভূমিক কেন্দ্রিকরণ চান। এখনও পর্যন্ত কোনও সমাধানই এটি সম্পাদন করে না। উল্লম্ব কেন্দ্রে = (।

— mrtsherman

আমাকে কেবল এটিই বলতে দাও যে ফ্লেক্সবক্স এই উত্তরটি 2014 এর জন্য অকেজো করে। হ্যাঁ বাবু!

— foreyez

আমার পৃষ্ঠার কেন্দ্রে এইচটিএমএল বোতাম প্রান্তিককরণের চেষ্টা করার

— মওদুলাস

Answer 1

আপডেট উত্তর

আপডেট করা কারণ আমি লক্ষ্য করেছি যে এটি একটি সক্রিয় উত্তর, তবে ফ্লেক্সবক্সটি এখন সঠিক পদ্ধতির হবে।

সরাসরি নমুনা

উল্লম্ব এবং অনুভূমিক প্রান্তিককরণ।

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

ঠিক অনুভূমিক (যতক্ষণ না মূল ফ্লেক্স অক্ষটি অনুভূমিক যা ডিফল্ট হয়)

#wrapper {
  display: flex;
  justify-content: center;
}

একটি নির্দিষ্ট প্রস্থ এবং কোনও ফ্লেক্সবক্স ব্যবহার করে আসল উত্তর

যদি মূল পোস্টারটি উল্লম্ব এবং কেন্দ্রের প্রান্তিককরণটি বোতামের নির্দিষ্ট প্রস্থ এবং উচ্চতার জন্য এটি বেশ সহজ চায় তবে নীচের চেষ্টা করুন

সরাসরি নমুনা

সিএসএস

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

শুধু অনুভূমিক প্রান্তিককরণের জন্য

button{
    margin: 0 auto;
}

অথবা

div{
    text-align:center;
}

Comments

-1 এটি ভয়াবহ। মূলত, আপনি প্রস্থটি 100% এবং তারপরে মার্জিন -50 এ সেট করেছেন। তবে অন্যান্য সমস্যাগুলির কারণ হ'ল বোতামটি ধারণকারী উপাদানটির উপরে উঠে যায় এবং আকার পরিবর্তন করে ভাল কাজ করে না।

— কোডি বাগস্টেইন

আরে কমপক্ষে আপনার ডাউন ভোটের কথা ইমরিকে ব্যাখ্যা করার জন্য ধন্যবাদ, এছাড়াও নোট করুন, আমি স্থির প্রস্থ এবং উচ্চতা বলেছি , পরিবর্তনশীল নয়। সুতরাং আকার পরিবর্তন একটি ফ্যাক্টর নয়। "মূলত" আমি প্রস্থটি 100px এ সেট করেছি , 100% নয়, এবং মার্জিন -50 px যা অর্ধেক। এটি কেন্দ্রীভূত করার জন্য একটি দুর্দান্ত মান পদ্ধতি। যদিও আমি আপনার উত্তরের অপেক্ষায়

— রয়েছি

আপনার ওয়েলকস (কঠোরতার জন্য দুঃখিত, আপনি হাস্যরসের অনুভূতি পেয়েছেন বলে খুশী) আমার অর্থ 100px। আপনি বুঝতে পেরেছিলেন যে আপনি "স্থির" লিখেছেন, তবে এখনও আমি মনে করি এই উত্তরটি বেশিরভাগ পরিস্থিতিতে ভাল হবে না

— কোডিবাগস্টাইন

Answer 2

আপনি ঠিক করতে পারেন:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

অথবা আপনি এটির পরিবর্তে এটি করতে পারেন:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

প্রথমটি ডিভের অভ্যন্তরে সমস্ত কিছু প্রান্তিককরণ করবে। অন্যটি কেবলমাত্র বোতামটি প্রান্তিককরণ করবে।

Answer 3

এট ভয়েলা:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

আপডেট : ওপি যদি অনুভূমিক এবং উল্লম্ব কেন্দ্রের সন্ধান করে তবে এই উত্তরটি একটি নির্দিষ্ট প্রস্থ / উচ্চতার উপাদানটির জন্য এটি করবে।

Comments

আপনার প্রয়োজন হতে পারে "ডিসপ্লে: ব্লক";

— সমাধানযোগ্য নোনাগন

নিবন্ধন করুন "ডিসপ্লে: ব্লক" "মার্জিন: 0 অটো" দিয়ে কৌতুক করে

— টমাস লুকাক 13

Answer 4

মার্জিন: 0 অটো; শুধুমাত্র অনুভূমিক কেন্দ্রীকরণের জন্য সঠিক উত্তর। উভয় উপায়ে কেন্দ্রের জন্য jquery ব্যবহার করে এর মতো কিছু কাজ করবে:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

---

আপডেট ... পাঁচ বছর পরে , সহজেই অনুভূমিকভাবে এবং উল্লম্বভাবে উভয় বোতামটি কেন্দ্র করতে পিতা-মাতার ডিআইভি উপাদানের ফ্লেক্সবক্স ব্যবহার করা যেতে পারে।

সেরা সমর্থনের জন্য সমস্ত ব্রাউজারের উপসর্গ সহ

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

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

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

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

Comments

jQuery এর? সিরিয়াসলি?

— প্রণশ রবি

@ প্রণেশরভি - ২০১১ সালে লম্বভাবে কিছু কেন্দ্রের জন্য সিএসএসে অনেকগুলি বিকল্প উপলব্ধ ছিল না, তাই হ্যাঁ, জাভাস্ক্রিপ্টটি কোনও উপাদানটির সঠিক উচ্চতা এবং প্রস্থটি যদি না জানতেন এবং মার্জিনগুলি বিয়োগ করতে পারতেন তবে তা অস্বাভাবিক ছিল না।

— অ্যাডিনিও

আপনি কোনও উপাদানকে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্র করতে সর্বদা ফ্লেক্স ব্যবহার করতে পারেন।

— প্রণেশ রবি

@ প্রাণেশরভি - হ্যাঁ আপনি পারেন, এই প্রশ্নটির ফ্লেক্সবক্স একটি দুর্দান্ত উত্তর, এবং আমি এটি যুক্ত করব, তবে ২০১১ সালে কোনও ফ্লেক্সবক্স ছিল না।

— অ্যাডিনিও

@ জেগালার্ডো - আমি মনে করি আপনি অন্যান্য অংশগুলি অনুভূমিকভাবে নয়, উল্লম্বভাবেও বোতামটি কেন্দ্র করার চেষ্টা করছেন সেই অংশটি আপনি মিস করেছেন এবং 9 বছর আগে সিএসএসের সাথে এটি করার জন্য কোনও ভাল বিকল্প ছিল না

— অ্যাডেনিও

Answer 5

সীমিত বিবরণ সরবরাহ করা সহ, আমি সর্বাধিক সাধারণ পরিস্থিতি ধরে নেব এবং বলব যে আপনি এটি ব্যবহার করতে পারেন text-align: center:

http://jsfiddle.net/pMxty/

Answer 6

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

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

এবং তারপরে ক্লাসটি আপনার বোতামে যুক্ত করুন।

<button class="Center">Demo</button> 

Answer 7

আপনি যান এখানে আপনার এটি সহজ নেওয়া উচিত:

প্রথমে আপনার পাঠ্য বা বোতামের প্রাথমিক অবস্থান রয়েছে:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

এই সিএসএস কোড লাইনটি এইচ 2 ট্যাগে বা ডিভিগ ট্যাগে যুক্ত করে যা বোতাম ট্যাগ ধারণ করে

শৈলী: "পাঠ্য-সারিবদ্ধ: কেন্দ্র;"

Finaly ফলাফল কোড হবে:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

Comments

আপনি স্বাগতম ভাই

— নাদির হামিদো

Answer 8

এটি জুড়ে এসেছিল এবং ভেবেছিলাম যে আমি যে সমাধানটি ব্যবহার করেছি তাও ছেড়ে দেব, যা উল্লম্ব এবং অনুভূমিক কেন্দ্রীকরণ উভয়ই ব্যবহার করে line-heightএবং text-align: centerকরতে:

জেএসফিডল কাজের জন্য এখানে ক্লিক করুন

Answer 9

আপনার ক্ষেত্রে যেমন প্রস্থকে গতিশীলভাবে গণনা করা হয় তার <button type = "button">মধ্যে উল্লম্ব এবং অনুভূমিকভাবে উভয়কে কেন্দ্র করতে <div>, এই কাজটি করতে হবে:

1. text-align: center;মোড়কে সেট করুন <div>: আপনি যখনই পুনরায় আকার দিন <div>(বা বরং উইন্ডো) এটি বোতামটি কেন্দ্র করবে

2. উল্লম্ব সারিবদ্ধকরণের জন্য, আপনাকে margin: valuepx;বোতামটির জন্য সেট করতে হবে । এটি গণনা করার নিয়ম valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

এখানে একটি জেএস বিন ডেমো রয়েছে ।

Answer 10

বেশিরভাগ ক্ষেত্রে প্রযোজ্য সুপার সিম্পল উত্তরটি হ'ল মার্জিন 0 autoসেট করা এবং এতে প্রদর্শন সেট করা block। আপনি দেখতে পারেন কীভাবে কোডপেনের আমার ডেমোতে আমি আমার বোতামটি কেন্দ্র করেছিলাম

Answer 11

সবচেয়ে সহজ জিনিসটি এটি "ডিভ" হিসাবে একটি "মার্জিন: 0 অটো" প্রদান হিসাবে ইনপুট হয় তবে আপনি যদি এটি কেন্দ্রিক করতে চান তবে আপনাকে এটির প্রস্থ দেওয়া দরকার

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

Answer 12

পিতামাতার উপাদান আকারের সাথে সম্পর্কিত না হয়ে (স্পষ্টতা এবং পৃথকীকরণের উদ্বেগের জন্য ডেটা অ্যাট্রিবিউট হুক ব্যবহার করে) কোনও বোতামটি উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্র করার জন্য রিসপন্সেস সিএসএস বিকল্প :

এইচটিএমএল

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

সিএসএস

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

ফিডল: https://jsfiddle.net/crrollyson/zebo1z8f/

Answer 13

একটি ডিভের মধ্যে আপনার বোতামটি কেনার প্রতিক্রিয়াশীল উপায়:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

Comments

এই উত্তরটি ইনলাইন শৈলীগুলি সরিয়ে এবং একটি ডেমো দেখিয়ে উন্নত করা যেতে পারে

— জেগালার্ডো

Answer 14

ধরুন ডিভটি # ডিভ এবং বোতামটি # বাটন:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

তারপরে নিয়মিত বোতামটি ডিভের মধ্যে রাখুন।