টুইটার বুটস্ট্র্যাপ - কীভাবে উপাদানগুলিকে অনুভূমিকভাবে বা উলম্বভাবে কেন্দ্র করা যায়

Question

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

Comments

এটি অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রীকরণ সম্পর্কে একটি দুর্দান্ত পোস্ট: এখানে দেখুন

— মার্কভ্যান্ডেনকর্পুট

আমিও অনুভূমিক প্রান্তিককরণের জন্য একটি সমস্যার মুখোমুখি হয়েছি; আমি সহজভাবে <center></center>ট্যাগটি ব্যবহার করেছি

— উৎপল - উর সেরা পাল

@ উতপাল-আরবেস্টপাল <center>ট্যাগটি প্রায় 12 বছর আগে অবচয় করা হয়েছিল।

— নীলস কেওরেন্টজেস

Answer 1

আপডেট : যদিও এই উত্তরটি সম্ভবত 2013 সালের শুরুর দিকে সঠিক ছিল, এটি আর ব্যবহার করা উচিত নয়। সঠিক সমাধান অফসেট ব্যবহার করে ।

---

অন্যান্য ব্যবহারকারীর পরামর্শ মতো এখানে নেটিভ বুটস্ট্র্যাপ ক্লাসও পাওয়া যায়:

class="text-center"
class="pagination-centered"

@ হেনিং এবং @ ট্রেজদারকে ধন্যবাদ

Comments

ঠিক একই স্টাইলিং ইতিমধ্যে বুটস্ট্র্যাপে রয়েছে; স্রেফ ব্যবহার করুনclass="text-center"

— হেনিং

বা .pagination-centeredবিকল্প হিসাবে।

— ট্র্যাজার

এটি উত্তর হওয়া উচিত, অন্যরা প্রশ্নের পুরো 'ইন বুটস্ট্র্যাপ' উপেক্ষা করে।

— রায়ান ম্যাকডোনফ 3'13

@ রায়ানম্যাকডনফ হ্যাঁ কার্যকরভাবে এটি অন্য সমস্ত লোকদের পরামর্শ দিচ্ছে যাতে আমি উত্তরটি ঠিক হিসাবে পরীক্ষা করেছি?

— এটিমে

text-centerবিন্যাসের জন্য ব্যবহার করা খুব খারাপ অনুশীলন। বুটস্ট্র্যাপে কলামগুলি সারিবদ্ধ করার সঠিক উপায় হ'ল col-XX-offset-Yক্লাস ব্যবহার করে । getbootstrap.com/css/#grid-offsetting । এই উত্তরটি সম্ভবত 2013 সালে সঠিক ছিল তবে আজ আর ব্যবহার করা উচিত নয়।

— নীলস কেওরেন্টজেস

Answer 2

থেকে বুটস্ট্র্যাপ ডকুমেন্টেশন :

display: blockমাধ্যমে এবং কেন্দ্রের মাধ্যমে একটি উপাদান সেট করুন margin। মিক্সিন এবং ক্লাস হিসাবে উপলব্ধ।

<div class="center-block">...</div>

Answer 3

এই প্রশ্নের ভবিষ্যতের দর্শকদের জন্য:

আপনি যদি একটি ছবিতে কোনও চিত্রকে কেন্দ্র করার চেষ্টা করছেন তবে চিত্রটি কেন্দ্র করে না, এটি আপনার সমস্যার বর্ণনা দিতে পারে:

jsFizz সমস্যা ডেমো

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

img-responsiveবর্গ একটি যোগ display:blockইমেজ ট্যাগ, যা স্টপ করার নির্দেশ text-align:center( text-centerকাজ করা থেকে বর্গ)।

সমাধান:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

center-blockক্লাস যুক্ত display:blockকরা img-responsiveক্লাস ব্যবহার করে দেওয়া নির্দেশকে ওভাররাইড করে ।

img-responsiveক্লাস ছাড়াই চিত্রটি text-centerক্লাস যুক্ত করে কেন্দ্র করবে would

---

হালনাগাদ:

এছাড়াও, আপনার ফ্লেক্সবক্সের বেসিকগুলি এবং এটি কীভাবে ব্যবহার করা উচিত তা জানা উচিত , যেহেতু বুটস্ট্র্যাপ 4 এখন এটি স্থানীয়ভাবে ব্যবহার করে ।

ব্র্যাড শিফের একটি দুর্দান্ত, দ্রুতগতির ভিডিও টিউটোরিয়াল এখানে

এখানে দুর্দান্ত চিট শীট দেওয়া হয়েছে

Answer 4

আপডেট হয়েছে 2018

ইন বুটস্ট্র্যাপ 4 , কেঁদ্রীকরণ পদ্ধতি পরিবর্তিত হয়েছে ..

বিএস 4-তে অনুভূমিক কেন্দ্র

• text-centerএখনও display:inlineউপাদান জন্য ব্যবহৃত হয়
• mx-autocenter-blockকেন্দ্রস্থ display:flexশিশুদের প্রতিস্থাপন
• offset-* বা mx-auto গ্রিড কলামগুলি কেন্দ্র করতে ব্যবহার করা যেতে পারে

mx-auto(স্বয়ংক্রিয় x- অক্ষ মার্জিন) কেন্দ্রীভূত হবে display:blockবা display:flexউপাদানের একটি আছে সংজ্ঞায়িত প্রস্থ ( %, vw, px, ইত্যাদি ..)। ফ্লেক্সবক্স গ্রিড কলামগুলিতে ডিফল্টরূপে ব্যবহৃত হয় , তাই বিভিন্ন ফ্লেক্সবক্স কেন্দ্রিক পদ্ধতিও রয়েছে।

ডেমো বুটস্ট্র্যাপ 4 অনুভূমিক কেন্দ্রিকরণ

বিএস 4 তে উল্লম্ব কেন্দ্রীকরণের জন্য https://stackoverflow.com/a/41464397/171456 দেখুন

Answer 5

আপনি সরাসরি আপনার সিএসএস ফাইলে এটি লিখতে পারেন:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

Answer 6

আমি এটি ব্যবহার করি

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

Comments

নির্দিষ্ট ক্ষেত্রে না কাজ (দেখুন না মূলত একই উত্তর মন্তব্য এবং ব্যবহার করতে না কেঁদ্রীকরণ জন্য বুটস্ট্র্যাপ-নির্দিষ্ট শ্রেণীর ।

— ড্যান Dascalescu

Answer 7

অনুভূমিক কেন্দ্রের জন্য আপনার এমন কিছু থাকতে পারে:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

Comments

কাজ নাও (অন্তত বর্তমান বাস্তবায়ন নেই), যখন সরাসরি একটি ছবিতে ব্যবহৃত: <img src="img/logo.png" style="float:none; margin:0 auto" />। পার্শ্ববর্তী imgপিতা বা মাতা সঙ্গে divএবং দান .text-centerবা .pagination-centeredপিতা বা মাতা থেকে বর্গ একটি যাদুমন্ত্র মত কাজ করে।

— ট্র্যাজার

মার্জিন সহ একটি উপাদানকে কেন্দ্র করতে: 0 স্বয়ংক্রিয়ভাবে আপনাকে সেই উপাদানটির প্রস্থ যুক্ত করতে হবে। উপরের উদাহরণে কোনও প্রস্থ নির্দিষ্ট করা হয়নি কারণ বুবস্ট্র্যাপে স্প্যান 8 এর প্রস্থ রয়েছে তবে আপনার চিত্রটি <img src = "img / logo.png" শৈলী = "ভাসা: কিছুই নয়; মার্জিন: 0 অটো; প্রস্থ: 300px" /> পিতা বা মাতার ভিতরে এই চিত্রটি অনুভূমিকভাবে কেন্দ্র করবে

— রাউল

এটি প্রশ্নের "বুটস্ট্র্যাপ" উপেক্ষা করে।

— ড্যান ড্যাসক্লেস্কু

Answer 8

আমি একই সমাধান থেকে এই সমাধানটি পছন্দ করি। https://stackoverflow.com/a/25036303/2364401text-center আসল টেবিল ডেটা <td>এবং টেবিল শিরোনাম <th>উপাদানগুলিতে বুটস্ট্র্যাপ শ্রেণি ব্যবহার করুন । সুতরাং

<td class="text-center">Cell data</td>

এবং

<th class="text-center">Header cell data</th>

Answer 9

বুটস্ট্র্যাপ 4 দিয়ে আপনি ফ্লেক্স ব্যবহার করতে পারেন

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

উত্স: বুটস্ট্র্যাপ 4.1

Answer 10

বুটস্ট্র্যাপ 4 + ফ্লেক্স এটি সমাধান করুন

তুমি ব্যবহার করতে পার

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

এটি সেন্টেন্ট দিগন্ত এবং উল্লম্বের মাঝখানে হওয়া উচিত

Answer 11

আমি বুটস্ট্র্যাপ 4 এ আবিষ্কার করেছি আপনি এটি করতে পারেন:

কেন্দ্র অনুভূমিক প্রকৃতপক্ষে text-centerবর্গ

কেন্দ্র উল্লম্ব তবে বুটস্ট্র্যাপ ক্লাস ব্যবহার করে উভয়ই যুক্ত করছে mb-auto mt-autoযাতে মার্জিন-শীর্ষ এবং মার্জিন নীচের অংশটি স্বয়ংক্রিয়ভাবে সেট হয়।

Answer 12

জন্য bootstrap4 কয়েক আইটেম উল্লম্ব কেন্দ্র

ফ্লেক্স নিয়মের জন্য ডি-ফ্লেক্স

আইটেমের উপর উল্লম্ব দিকের জন্য নমনীয়-কলাম

কেন্দ্রীকরণের জন্য ন্যায্য বিষয়বস্তু-কেন্দ্র

শৈলী = 'উচ্চতা: 300px;' কেন্দ্রের পয়েন্টগুলির জন্য অবশ্যই কেন্দ্রের ক্যালক হতে হবে বা এইচ -100 শ্রেণি ব্যবহার করতে হবে

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>