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

Question

আমি containerদ্বিটির ভিতরে উল্লম্বভাবে কেন্দ্রীভূত করার jumbotronজন্য এবং পৃষ্ঠার মাঝখানে সেট করার জন্য একটি উপায় খুঁজছি ।

.jumbotronপূর্ণ উচ্চতা এবং পর্দার প্রস্থ অভিযোজিত করতে হবে। .containerDIV আছে একটি প্রস্থ হয়েছে 1025pxএবং পৃষ্ঠা (উল্লম্বভাবে কেন্দ্র) মাঝখানে হওয়া উচিত।

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

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>

Comments

প্রতিক্রিয়াশীল কেন্দ্রিক কলামগুলিতে এটি দেখুন minimit.com/articles/solutions-tutorials/…

— গথবার্জ

css-versical-center.com এ ব্রাউজারের সামঞ্জস্যতার তথ্যের সাথে কিছু সমাধান রয়েছে

— EscapeNetscape

Answer 1

নমনীয় বক্স উপায়

উল্লম্ব সারিবদ্ধতা এখন নমনীয় বাক্স বিন্যাস ব্যবহার করে খুব সহজ । আজকাল, এই পদ্ধতিটি ইন্টারনেট এক্সপ্লোরার 8 এবং 9. ব্যতীত বিভিন্ন ওয়েব ব্রাউজারগুলিতে সমর্থিত Therefore সুতরাং আমাদের আইই 8/9 এর জন্য কিছু হ্যাক / পলিফিল বা বিভিন্ন পদ্ধতির ব্যবহার করতে হবে ।

নিম্নলিখিতটিতে আমি আপনাকে কেবল 3 লাইনের পাঠ্য (পুরানো ফ্লেক্সবক্স সিনট্যাক্স নির্বিশেষে) কীভাবে এটি করতে দেখাব ।

দ্রষ্টব্য:.jumbotron উল্লম্ব সারিবদ্ধতা অর্জনের জন্য পরিবর্তনের পরিবর্তে অতিরিক্ত শ্রেণি ব্যবহার করা ভাল । আমি vertical-centerউদাহরণস্বরূপ শ্রেণীর নাম ব্যবহার করব।

উদাহরণ এখানে ( জাসবিনে একটি আয়না ) ।

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

গুরুত্বপূর্ণ নোট (ডেমোতে বিবেচিত) :

1. একজন শতাংশ মান heightবা min-heightবৈশিষ্ট্য আপেক্ষিক heightসুতরাং আপনি উল্লেখ করা উচিত, পিতা বা মাতা উপাদান heightপিতা বা মাতা এর স্পষ্টভাবে।

2. ব্রেভিটি প্রিফিক্সড / পুরাতন ফ্লেক্সবক্স সিনট্যাক্স ব্রেভিটির কারণে পোস্ট স্নিপেটে বাদ দেওয়া হয়েছে তবে এটি অনলাইন উদাহরণে উপস্থিত রয়েছে।

3. যেমন ফায়ারফক্স 9 পুরনো ওয়েব ব্রাউজার এর কিছু দেশের ক্ষেত্রে ^{(যেখানে আমি পরীক্ষা করেছি)} -, আনমন ধারক .vertical-centerএই ক্ষেত্রে - পিতা বা মাতা ভিতরে উপলব্ধ স্থান নেবে না, তাই আমরা নির্দিষ্ট করতে হবে widthমত সম্পত্তি: width: 100%।

4. এছাড়াও উপরে উল্লিখিত কয়েকটি ওয়েব ব্রাউজারে, .containerএই ক্ষেত্রে - ফ্লেক্স আইটেমটি কেন্দ্রে অনুভূমিকভাবে উপস্থিত নাও হতে পারে। এটি বাম প্রযুক্ত / ডান বলে মনে হয় marginএর autoআনমন আইটেমের উপর কোনো প্রভাব নেই।
   অতএব আমাদের এটি প্রান্তিক করা প্রয়োজন box-pack / justify-content।

আরও বিশদ এবং / বা কলামগুলির উল্লম্ব সারিবদ্ধতার জন্য, আপনি নীচের বিষয়টিকে উল্লেখ করতে পারেন:

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

---

উত্তরাধিকারী ওয়েব ব্রাউজারগুলির জন্য traditionalতিহ্যগত উপায়

আমি এই প্রশ্নের উত্তর দেওয়ার সময় আমি লিখেছিলাম এটি পুরানো উত্তর। এই পদ্ধতিটি এখানে আলোচনা করা হয়েছে এবং এটি ইন্টারনেট এক্সপ্লোরার 8 এবং 9 তেও কাজ করার কথা। আমি সংক্ষেপে এটি ব্যাখ্যা করব:

ইনলাইন প্রবাহে, একটি ইনলাইন স্তরের উপাদান vertical-align: middleঘোষণার মধ্য দিয়ে উলম্বভাবে সারিবদ্ধ করা যায় । ডাব্লু 3 সি থেকে স্পেস :

মাঝখানের
বাক্সের উল্লম্ব মিডপয়েন্টটি পিতামাতার বাক্সের বেসলাইন এবং পিতামাতার অর্ধেক এক্স উচ্চতার সাথে সারিবদ্ধ করুন।

এই ক্ষেত্রে পিতামাতা - .vertical-centerএই ক্ষেত্রে উপাদানটির একটি স্পষ্টতা রয়েছে height, যে কোনও সুযোগে যদি আমরা কোনও সন্তানের উপাদান heightপিতামাতার সাথে ঠিক একই রকম ধারণ করতে পারি তবে আমরা পিতামাতার বেসলাইনটিকে পুরো মিডপয়েন্টে সরিয়ে নিতে সক্ষম হব - উঁচু শিশু এবং আশ্চর্যজনকভাবে আমাদের পছন্দসই ইন-ফ্লো শিশুটিকে তৈরি করে - দ্য .container- উল্লম্বভাবে কেন্দ্রে সংযুক্ত করা হয়েছে igned

সব একসাথে করা

বলা হচ্ছে, আমরা .vertical-centerবাই ::beforeবা ::afterসিউডো উপাদানগুলির মধ্যে একটি পূর্ণ উচ্চতার উপাদান তৈরি করতে displayপারি এবং এটির এবং অন্যান্য শিশুটির ডিফল্ট ধরণের পরিবর্তন .containerকরতে পারি inline-block।

তারপরে vertical-align: middle;ইনলাইন উপাদানগুলি উল্লম্বভাবে সারিবদ্ধ করতে ব্যবহার করুন।

আপনি এখানে যান:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

কাজ ডেমো ।

এছাড়াও, অতিরিক্ত ছোট পর্দা মধ্যে অপ্রত্যাশিত সমস্যা প্রতিরোধ করার জন্য, আপনি সিউডো-উপাদান উচ্চতা পুনরায় সেট করতে পারেন autoঅথবা 0বা তার পরিবর্তন displayকরতে টাইপ করুন noneযদি তাই হয় প্রয়োজন:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

আপডেট করা ডেমো

এবং আরও একটি জিনিস:

থাকে তাহলে footer/ headerধারক প্রায় অংশ, এটা অবস্থানে সঠিকভাবে উপাদান ভালো ( relative, absolute?, আপনি আপ।) এবং একটি উচ্চ যোগ z-indexঅন্যদের উপরে সবসময় রাখার মান (আশ্বাসন জন্য)।

Comments

আসুন আমরা এই আলোচনাটি

— চ্যাটটিতে

এটি সব ভাল এবং ভাল, তবে আপনি এটিতে যুক্ত display: flexহওয়ার সাথে সাথে .containerএটি সন্তানের .rowপিছনে ছড়িয়ে পড়ে। দেখে মনে হচ্ছে যে ফ্লেক্সবক্সের পথে আমাদের কিছু মূল বুটস্ট্র্যাপ বৈশিষ্ট্য ব্যবহার করে চলে যেতে হবে?

— আব্রাহাম ব্রুকস

Ditionতিহ্যবাহী পদ্ধতিটি আমার পক্ষে কাজ করেছিল।

— নিক ডাব্লু

Answer 2

2019 আপডেট করুন

বুটস্ট্র্যাপ 4 এর মধ্যে ফ্লেক্সবক্স রয়েছে, সুতরাং উল্লম্ব কেন্দ্রের পদ্ধতিটি আরও সহজ এবং অতিরিক্ত সিএসএসের প্রয়োজন হয় না ।

শুধু d-flexএবং align-items-centerইউটিলিটি ক্লাস ব্যবহার করুন ..

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

গুরুত্বপূর্ণ: উল্লম্ব কেন্দ্রীকরণ উচ্চতার সাথে সম্পর্কিত । আইটেম আপনি কেন্দ্রে চেষ্টা করছেন অভিভাবক ধারক আবশ্যক একটি আছে সংজ্ঞায়িত উচ্চতা । আপনি চাইলে পৃষ্ঠার উচ্চতাটি ব্যবহার করুন vh-100বা min-vh-100পিতামাতায়! উদাহরণ স্বরূপ:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

---

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

Answer 3

বুটস্ট্র্যাপ.এসএস যুক্ত করুন এবং আপনার সিএসএস এ এটি যুক্ত করুন

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

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

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>

Comments

এইচটিএমএল এবং বডি {উচ্চতা: 100%; the হল কী

— xxxbence

Answer 4

ইন বুটস্ট্র্যাপ 4 :

থেকে অনুভূমিকভাবে শিশু কেন্দ্র , ব্যবহার বুটস্ট্র্যাপ -4 শ্রেণী:

justify-content-center

থেকে উল্লম্বভাবে শিশু কেন্দ্র , ব্যবহার বুটস্ট্র্যাপ -4 শ্রেণী:

 align-items-center

তবে মনে রাখবেন যে এটির মতো এটি একটি বুটস্ট্র্যাপ -4 ইউটিলিটি শ্রেণীর সাথে ডি-ফ্লেক্স ক্লাসটি ব্যবহার করতে ভুলবেন না

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

দ্রষ্টব্য: এই কোডটি যদি কাজ না করে তবে বুটস্ট্র্যাপ -4 ইউটিলিটিগুলি যুক্ত করার বিষয়টি নিশ্চিত করুন

আমি জানি এটি এই প্রশ্নের সরাসরি উত্তর নয় তবে এটি কারওর পক্ষে সহায়তা করতে পারে

Comments

এটি কেবল জিমের উত্তর অনুলিপি করার জন্য উপস্থিত হয়।

— টাইলার

Answer 5

আমার পছন্দের কৌশল:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

---

ডেমো

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.jumbotron {
   display: table-cell;
   vertical-align: middle;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

আরও দেখুন এই বেহালার !

Answer 6

আইই, ফায়ারফক্স এবং ক্রোমে পরীক্ষিত।

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

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

<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

Https://css-tricks.com/centering-css-complete-guide/ এ পাওয়া গেছে

Answer 7

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

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

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

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

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

তারপরে অনুভূমিক কেন্দ্র ডিভ ডি-ফ্লেক্স ন্যায্যতা-সামগ্রী-কেন্দ্র এবং কিছু ধারক

সুতরাং আমাদের কাছে 3 ট্যাগের বিভাগক্রম রয়েছে: ডিভ-কলাম -> দ্বি-সারি -> ডিভ-ধারক

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

Comments

এটি কেবল জিমের উত্তর অনুলিপি করার জন্য উপস্থিত হয়।

— টাইলার

Answer 8

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করেন তবে আপনাকে কেবল 2 ডিভ যোগ করতে হবে:

.jumbotron{
  height:100%;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

ক্লাস: ডি-টেবিল, ডি-টেবিল-সেল, ডাব্লু -100, এইচ -100 এবং সারিবদ্ধ-মধ্যবর্তী কাজটি করবে

Answer 9

কনটেইনার ক্লাস দিন

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

ধারকটির ভিতরে থাকা ডিভটি দিন:

align-content: center;

এই ডিভের সমস্ত লিখিত সামগ্রী পৃষ্ঠার মাঝখানে প্রদর্শিত হবে।

Answer 10

লম্বুভাবে সারিবদ্ধভাবে প্রান্তিককরণের জন্য আমি যেভাবে ব্যবহার করছি - বুটস্ট্র্যাপ 3 সারি সহ শীর্ষ / কেন্দ্র / নীচে। বুটস্ট্র্যাপ 3 টি কলাম একই উচ্চতা এবং উল্লম্বভাবে সারিবদ্ধ সঙ্গে

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;

<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

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