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

Question

আমি বুটস্ট্র্যাপ 4 ব্যবহার করে পৃষ্ঠার মাঝখানে আমার কনটেইনারটি কেন্দ্র করার চেষ্টা করছি I আমি এখনও অবধি ব্যর্থ। কোন সাহায্য প্রশংসা করা হবে।

আমি কোডেপেন.ইওতে এটি তৈরি করেছি যাতে আপনি ছেলেরা এটি নিয়ে খেলতে পারেন এবং আমাকে ধারণা দিন যে আমি কী কাজ করি তা আমাকে জানান ...

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

গুরুত্বপূর্ণ! উল্লম্ব কেন্দ্রটি পিতামাতার উচ্চতার সাথে সম্পর্কিত

উপাদান কেন্দ্রে করার চেষ্টা করছেন অভিভাবক কোন সংজ্ঞায়িত করে থাকে তাহলে উচ্চতা , কেউ উল্লম্ব কেঁদ্রীকরণ সমাধান কাজ করবে!

এখন, বুটস্ট্র্যাপ 4 এ উল্লম্ব কেন্দ্রীকরণের দিকে ...

আপনি পূর্ণ উচ্চতা এবং করতে নতুন ফ্লেক্সবক্স এবং আকারের ইউটিলিটিগুলি ব্যবহার করতে পারেন । এই বিকল্পগুলির জন্য অতিরিক্ত সিএসএসের প্রয়োজন নেই ( ধারকটির উচ্চতা (যেমন: এইচটিএমএল, বডি) অবশ্যই 100% হওয়া উচিত )।containerdisplay: flex

align-self-centerফ্লেক্সবক্স সন্তানের বিকল্প 1

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

অপশন 2 align-items-centerflexbox পিতা বা মাতা উপর ( .rowহয় display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

অপশন 3 justify-content-centerflexbox পিতা বা মাতা উপর ( .cardহয় display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

---

বুটস্ট্র্যাপ 4 টি উল্লম্ব কেন্দ্রিকরণ সম্পর্কে আরও

এখন যে বুটস্ট্র্যাপ 4 ফ্লেক্সবক্স এবং অন্যান্য ইউটিলিটিগুলি সরবরাহ করে , উল্লম্ব সারিবদ্ধ করার জন্য অনেকগুলি পন্থা রয়েছে। http://www.codeply.com/go/WG15ZWC4lf

1 - অটো মার্জিন ব্যবহার করে উল্লম্ব কেন্দ্র:

উল্লম্বভাবে কেন্দ্রের আরেকটি উপায় ব্যবহার করা my-auto। এটি তার ধারকটির মধ্যে উপাদানটি কেন্দ্র করবে। উদাহরণস্বরূপ, h-100সারিটি সম্পূর্ণ উচ্চতা তৈরি করে এবং my-autoউল্লম্বভাবে col-sm-12কলামটি কেন্দ্র করবে ।

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

উল্লম্ব কেন্দ্র অটো মার্জিনস ডেমো ব্যবহার করে

my-auto উল্লম্ব y- অক্ষের মার্জিন উপস্থাপন করে এবং এর সমতুল্য:

margin-top: auto;
margin-bottom: auto;

---

2 - ফ্লেক্সবক্স সহ উল্লম্ব কেন্দ্র:

যেহেতু বুটস্ট্র্যাপ 4 .rowএখন display:flexআপনি align-self-centerযেকোন কলামে উল্লম্বভাবে কেন্দ্রে ব্যবহার করতে পারবেন ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

অথবা, সারিবদ্ধভাবে সারিবদ্ধভাবে সারিবদ্ধভাবে কেন্দ্রের জন্য পুরোটি ব্যবহার align-items-centerকরুন ....rowcol-*

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

উল্লম্ব কেন্দ্র বিভিন্ন উচ্চতা কলাম ডেমো

কেন্দ্রে এই কিউ / এ দেখুন তবে সমান উচ্চতা বজায় রাখুন

---

3 - প্রদর্শন ইউটিলিটি ব্যবহার করে উল্লম্ব কেন্দ্র:

বুটস্ট্র্যাপ 4 হয়েছে প্রদর্শন utils যে জন্য ব্যবহার করা যেতে পারে display:table, display:table-cell, display:inline, ইত্যাদি .. এই ব্যবহার করা যেতে পারে উল্লম্ব প্রান্তিককরণ utils সারিবদ্ধ ইনলাইন করা, ইনলাইন-ব্লক বা টেবিল সেল উপাদান।

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

প্রদর্শন ইউটিলেস ডেমো ব্যবহার করে উল্লম্ব কেন্দ্র

আরো উদাহরণ
মধ্যে উল্লম্ব কেন্দ্র ইমেজ <div>
.container মধ্যে উল্লম্ব কেন্দ্র .row
উল্লম্ব কেন্দ্র এবং নীচে <div>
পিতা বা মাতা ভিতরে উল্লম্ব কেন্দ্র সন্তান
উল্লম্ব কেন্দ্র পূর্ণ পর্দায় jumbotron

---

গুরুত্বপূর্ণ! আমি উচ্চতা উল্লেখ করেছি?

মনে রাখবেন উল্লম্ব কেন্দ্রীকরণ মূল উপাদানগুলির উচ্চতার সাথে সম্পর্কিত । আপনি যদি পুরো পৃষ্ঠায় কেন্দ্র করতে চান, বেশিরভাগ ক্ষেত্রে, এটি আপনার সিএসএস হওয়া উচিত ...

body,html {
  height: 100%;
}

বা পিতামাতা / ধারকটিতে min-height: 100vh( min-vh-100বুটস্ট্র্যাপ 4.1+ এ) ব্যবহার করুন। আপনি যদি পিতামাতার ভিতরে কোনও শিশু উপাদানকে কেন্দ্র করতে চান। পিতামাতার অবশ্যই একটি নির্ধারিত উচ্চতা থাকতে হবে ।

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

Comments

কোনও নবারের সাথে পৃষ্ঠায় উপরে ব্যবহার করার সময় আমি একটি স্ক্রোলবার পাচ্ছি। আমি মনে করি এটি নভবারের নীচে 100% উচ্চতা যুক্ত করছে এবং এটি জুড়েই কেন্দ্রে। আমি কীভাবে এটি ঠিক করতে পারি?

— মাত্রা

আমি একাধিক সারি ফ্লেক্স বক্সের সাথে কেন্দ্রে প্রান্তিককরণের চেষ্টা করছি। আমি সমস্ত বোতামটি মাঝখানে সারিবদ্ধ করতে চাই। codeply.com/go/5abdqC33cU

— কোডার

আমি এখানে দেখানো পদ্ধতির উপর ভিত্তি করে কেন্দ্রীকরণের 3 টি উপায় দেখিয়ে একটি কোডপেন প্রস্তুত করেছি: কোডেপেন.আইও

— ইজিথ

Answer 2

প্যারেন্ট কন্টেইনারটিকে নমনীয় করে যোগ করে আপনি আপনার ধারকটিকে উল্লম্বভাবে সারিবদ্ধ করতে পারেন align-items:center:

body {
  display:flex;
  align-items:center;
}

আপডেট পেন

Comments

ওহহহহহহ, বর্ণনায় লিঙ্কটি মিস করেছি html, body {height:100%}... আপনিও যুক্ত করেছেন ... এটি যুক্ত করে এটি কাজ করেছে! ধন্যবাদ!

— কানাআন সিটন

আপনার উত্তরটি জিজ্ঞাসিত উপায়ে সমস্যার সমাধান করতে পারে না (বুটস্ট্র্যাপ ব্যবহার করে)

— অ্যালেক্সনিকনভ

আমি পুরোপুরি আপনার সাথে একমত নই, আপনি বুটস্ট্র্যাপ ক্লাসগুলির সাথে এটি কীভাবে করবেন তা নিয়ে প্রশ্ন থাকা সত্ত্বেও আপনি কাজের প্রস্তাবের প্রস্তাব দিয়েছেন।

— অ্যালেক্সনিকনভ

@ অ্যালেক্সনিকনভ এই ওপি-র প্রশ্নের মধ্যে যেখানেই বলা হয় না যে তারা কেবল বুটস্ট্র্যাপ ব্যবহারের মধ্যেই সীমাবদ্ধ - এই পৃষ্ঠায় ল্যান্ড করতে পারে এমন অন্যান্য লোকদের জন্য এটি বিকল্প যা বুটস্ট্র্যাপ শ্রেণি ব্যবহার না করে জিনিসগুলি উল্লম্বভাবে সারিবদ্ধ করতে চাইছেন। শুধু সাথে সরান - আপনার ব্যবহারের জন্য এখানে প্রচুর অন্যান্য উত্তর রয়েছে। আমি দেখতে পাচ্ছি না যে আপনি কেন এই সম্পর্কে ঝুলছেন - এটি কেবলমাত্র এককমনস্ক উত্তর নয় - এমন সমস্ত ধারণার জন্য একটি ফোরাম help এটি আপনার মত ব্যবহারকারীরাই এই সাইটটিকে নষ্ট করে দেওয়া উত্তরগুলি সমস্যার সমাধানের প্রস্তাব দেয় তবে কেবল আপনার পছন্দ না হওয়ার কারণে

— পিট

@ অ্যালেক্সনিকনভ এছাড়াও যদি আপনি মূল অশিক্ষিত পোস্টটি পড়েন (যখন আমি আমার উত্তর যুক্ত করেছি), আপনি দেখতে পাবেন যে ওপি বুটস্ট্র্যাপ ক্লাস ব্যবহার না করে কেন্দ্র করার চেষ্টা করছিল তাই উত্তর দেওয়ার সময়, এটি সঠিক ছিল

— পিট

Answer 3

বুটস্ট্র্যাপ অনুসরণ 4 ক্লাস আমাকে এটি সমাধান করতে সহায়তা করে

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

Comments

যদিও আমার ডিভটি উল্লম্বভাবে কেন্দ্র করে নি।

— ভোর

আপনি কি আপনার সিএসএস কোডটি বিস্তারিতভাবে বর্ণনা করতে পারেন? এটির একটি স্নিপেট শেয়ার করুন, আমি যে সমস্যাটির মুখোমুখি হচ্ছি তা সন্ধান করব।

— মনোজ

এটি আমার পাঠ্যটি কোল

— ডিভ-এর

Answer 4

কারণ উপরের কোনওটিই আমার পক্ষে কাজ করেনি, আমি অন্য উত্তর যুক্ত করছি।

লক্ষ্য: বুটস্ট্র্যাপ 4 ফ্লেক্সবক্স ক্লাস ব্যবহার করে কোনও পৃষ্ঠায় উল্লম্ব এবং অনুভূমিকভাবে সারিবদ্ধ করতে।

পদক্ষেপ 1: আপনার বাহ্যতমতম ডিভের উচ্চতায় সেট করুন 100vh। এটি উচ্চতাটি Veiwport উচ্চতার 100% এ সেট করে। আপনি যদি এটি না করেন তবে অন্য কিছু কাজ করবে না। এটিকে একটি উচ্চতায় সেট 100%করা কেবল পিতামাতার সাথে সম্পর্কিত, তাই পিতামাতার যদি ভিউপোর্টের পুরো উচ্চতা না হয় তবে কিছুই কার্যকর হবে না। নীচের উদাহরণে, আমি বডিটি 100vh এ সেট করেছি।

পদক্ষেপ 2: ধারক ডিভটিকে d-flexশ্রেণীর সাথে ফ্লেক্সবক্স ধারক হিসাবে সেট করুন ।

পদক্ষেপ 3: justify-content-centerশ্রেণি সহ অনুভূমিকভাবে কেন্দ্র ভাগ করুন ।

পদক্ষেপ 4: কেন্দ্রের সাথে উল্লম্বভাবে ডিভ align-items-center

পদক্ষেপ 5: পৃষ্ঠা চালান, আপনার উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রিক ডিভ দেখুন।

মনে রাখবেন যে এখানে কোনও বিশেষ শ্রেণি নেই যা কেন্দ্রিক ডিভ নিজেই সেট করা দরকার (শিশু ডিভ)

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

Comments

এটি সামান্য পরিবর্তনের সাথে কাজ করে

— অজয় কুমার

@ অজয়কুমার, আপনি কি নিজের পরিবর্তনগুলি ভাগ করতে চান?

— গ্রেগ গাম

ধন্যবাদ, বিশেষত 100vhকৌশলটি আমাকে অনেক সাহায্য করেছিল। বুটস্ট্র্যাপ এছাড়াও এর জন্য vh-100ক্লাস সরবরাহ করে ।

— svens

Answer 5

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 6

আমি এখানে থেকে সমস্ত উত্তর চেষ্টা করেছি, তবে এখানে h-100 এবং vh-100 এর মধ্যে পার্থক্যটি খুঁজে পেয়েছি এখানে আমার সমাধানটি দেওয়া হয়েছে:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

Answer 7

বুটস্ট্র্যাপ 4 (বিটা) এ, ব্যবহার করুন align-middle। পড়ুন উল্লম্ব সারিবদ্ধতা উপর বুটস্ট্র্যাপ 4 ডকুমেন্টেশন :

উল্লম্ব-প্রান্তিককরণ ইউটিলিটিগুলির সাথে উপাদানগুলির প্রান্তিককরণটি পরিবর্তন করুন । দয়া করে নোট করুন যে উল্লম্ব-সারিবদ্ধকরণ কেবল ইনলাইন , ইনলাইন-ব্লক , ইনলাইন-টেবিল এবং টেবিল ঘর উপাদানগুলিকে প্রভাবিত করে।

চয়ন করুন থেকে .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, এবং .align-text-topহিসাবে প্রয়োজন।

Answer 8

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

Comments

আপনার ছবিগুলি আমাকে স্ট্যাকওভারফ্লো এডস শুরু করেছে: ডি

— অ্যালেক্সনিকনভ

Answer 9

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

এই লাইন যেখানে জাদু এরকম <div class="col-md-6 my-auto">, my-autoকলামের বিষয়বস্তু কেন্দ্র হবে। এটি উপরের কোডের নমুনার মতো পরিস্থিতি সহ দুর্দান্ত কাজ করে যেখানে আপনার পরিবর্তনশীল মাপের চিত্র থাকতে পারে এবং কলামের সাথে ডান লাইনে টেক্সট থাকা দরকার।

Answer 10

আমি বুটস্ট্র্যাপের সাহায্যে এটি করেছি 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

Answer 11

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

Comments

@ অজয়কুমার flex-grow-1কার্ডে ক্লাস যুক্ত করা সঙ্কুচিত হওয়া থেকে রোধ করে।

— ফ্রেড

Answer 12

উল্লম্ব সারিবদ্ধকরণ এই বুটস্ট্র্যাপ 4 ক্লাস ব্যবহার করে:

পিতামাতা: ডি-টেবিল

এবং

শিশু: ডি-টেবিল-ঘর এবং মাঝারি এবং পাঠ্য কেন্দ্রটি প্রান্তিক করুন

উদাহরণ:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

এবং আপনি যদি পিতামাতাকে বৃত্ত হতে চান তবে:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

কোন দুটি কাস্টম সিএসএস ক্লাস নিম্নলিখিত হিসাবে রয়েছে:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

চূড়ান্ত ব্যবহার উদাহরণস্বরূপ হতে পারে:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Answer 13

আপনার সামগ্রীটি একটি ফ্লেক্সবক্স ধারকের মধ্যে রাখুন যা 100% উচ্চতর অর্থাৎ এইচ -100। তারপরে ন্যায়সঙ্গত -সামগ্রী-কেন্দ্র শ্রেণীর ব্যবহার করে বিষয়বস্তুকে কেন্দ্রীয়ভাবে ন্যায়সঙ্গত করুন ।

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

Answer 14

.my-autoইওর ডিভিতে সিএসএস ক্লাস ব্যবহার করুন

Answer 15

বুটস্ট্র্যাপে 4.1.3:

এটি যখন আমার শিরোনামের container > row > columnপাশে একটি বুটস্ট্র্যাপ ব্যাজটি কেনার চেষ্টা করছিল তখন আমার পক্ষে কাজ হয়েছিল meh1

কাজটি কি কিছু সহজ সিএসএস ছিল:

.my-valign-center {
  vertical-align: 50%;
}

অথবা

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>