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

285

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

css twitter-bootstrap

— এটা আমি
সূত্র

2

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

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

2

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

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

4

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

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

246

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

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

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

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

— এটা আমি
সূত্র

22

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

— হেনিং

3

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

— ট্র্যাজার

7

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

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

1

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

— এটিমে

1

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

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

76

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

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

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

— m0000g
সূত্র

55

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

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

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 এখন এটি স্থানীয়ভাবে ব্যবহার করে ।

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

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

— cssyphus
সূত্র

32

আপডেট হয়েছে 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 দেখুন

— জিম্বাবুয়ে
সূত্র

30

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

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

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

স্নিপেট প্রসারিত করুন

— kirgiz_jigit
সূত্র

9

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

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

— atabak
সূত্র

1

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

— ড্যান Dascalescu

7

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

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

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

— PersianMan
সূত্র

4

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

— ট্র্যাজার

2

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

— রাউল

2

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

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

5

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

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

এবং

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

— xander-মিলার
সূত্র

5

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

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

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

— alvseek
সূত্র

3

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

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

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

স্নিপেট প্রসারিত করুন

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

— taoufiqaitali
সূত্র

0

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

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

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

— অনলাইন টমাস
সূত্র

0

জন্য 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>

— রামিল গিলফানভ
সূত্র