একটি বুটস্ট্র্যাপ প্রতিক্রিয়াশীল পৃষ্ঠাতে কীভাবে একটি ডিভকে কেন্দ্র করে

Question

নীচের বর্ণিত লেআউটের মতো পৃষ্ঠার কেন্দ্রে ডিভি ডি পজিশনে বুটস্ট্র্যাপ ব্যবহার করে আমার একটি প্রতিক্রিয়াশীল পৃষ্ঠা তৈরি করতে হবে।

Comments

stackoverflow.com/questions/9554724/…

— কেনি থম্পসন

আমার পাঠ্যটি (বুটস্ট্র্যাপ ব্যবহার করে প্রতিক্রিয়াশীল নকশা) দিয়ে একটি ডিভ সেন্টার করা দরকার যা লেআউটের মতো আরও একটি পূর্ণ প্রশস্ত করল-এলজি -12 কেন্দ্রিক ডিভের ভিতরে উপস্থিত থাকতে হবে it যদি আমি ফ্রিডলে নমুনা কোডটি পেতে পারি তবে এটি সহায়ক হবে

— রমা প্রিয়া

Answer 1

বুটস্ট্র্যাপ 4 এর জন্য আপডেট

ফ্লেক্স-বাক্স সহ সরল উল্লম্ব গ্রিড প্রান্তিককরণ

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

বুটস্ট্র্যাপ 3 এর সমাধান

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

সমস্ত পর্দার আকারে এটি অনুভূমিক এবং উল্লম্বভাবে ডিভ কেন্দ্রে একটি সাধারণ উদাহরণ।

Comments

সম্ভবত class="col-xs-4 col-xs-offset-4"যথেষ্ট যথেষ্ট।

— L105

আমাকে সমস্ত পর্দার আকারে ডিভ কোল-এলজি -12 উল্লম্বভাবে কেন্দ্রে অবস্থান করতে হবে

— রামা প্রিয়া

আমি আপনার জন্য এই সমাধানটি খুঁজে পেয়েছি সমাধানটি jsfiddle.net/Palapas/52VtD/687 ধারকটির উচ্চতা 100% থাকতে হবে অন্যথায় আপনার অবস্থান নিখুঁত ব্যবহার করা দরকার

— ppollono

Answer 2

সিএসএস:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

এইচটিএমএল:

<div class="container">
  <div>
    example
  </div>
</div>

উদ্রেকর উদাহরণ

Comments

আমি মোবাইলে আমার সাইট খুললে এই সমাধানটি কার্যকর হয় না।

— কোডিনগ্রোস

হাই, আপনি কোন ব্রাউজারটি ব্যবহার করছিলেন? আপনি কি বুটস্ট্র্যাপের স্টাইলশিট এবং জাভাস্ক্রিপ্ট লোড করেছেন? এটি ফায়ারফক্স এবং ক্রোমে কাজ করছে। সমস্ত পর্দার আকারে পরীক্ষিত।

— ভোকাসেল

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

— রকি কেভ

এই

— ফিক্সটি

Answer 3

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

থেকে অনুভূমিকভাবে সন্তানের কেন্দ্র , ব্যবহার বুটস্ট্র্যাপ -4 বর্গ

justify-content-center

থেকে উল্লম্বভাবে সন্তানের কেন্দ্র , ব্যবহার বুটস্ট্র্যাপ -4 বর্গ

 align-items-center

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

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

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

Answer 4

বুটস্ট্র্যাপ 4 এর জন্য আপডেট

এখন যে বুটস্ট্র্যাপ 4 হ'ল ফ্লেক্সবক্স, উল্লম্ব সারিবদ্ধকরণ আরও সহজ। একটি পূর্ণ উচ্চতার ফ্লেক্সবক্স ডিভ দেওয়া, কেবল আমাদের my-autoশীর্ষ এবং নীচের মার্জিনের জন্য ...

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

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

---

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

Answer 5

সিএসএসে আপনাকে কোনও পরিবর্তন করার দরকার নেই আপনি এটি সরাসরি ক্লাসে লিখতে পারেন এবং ফল পাবেন।

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Answer 6

প্রদর্শন টেবিল এবং বুটস্ট্র্যাপ ছাড়াই, আমি বরং এটি করব would

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

Answer 7

ভাল উত্তর ppollono। আমি সবেমাত্র খেলছিলাম এবং আমি কিছুটা ভাল সমাধান পেয়েছি। সিএসএস একই থাকবে, যেমন:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

তবে এইচটিএমএলের জন্য:

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

এটি যথেষ্ট হবে।

Answer 8

সেরা উপায় নয়, তবে এখনও কাজ করবে

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

Answer 9

আমি মনে করি বুটস্ট্র্যাপের সাহায্যে লেআউটটি সম্পন্ন করার সহজ উপায়টি এরকম:

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

আমি যা করলাম তা হল ডিভের স্তরগুলি যুক্ত করা যা আমাকে ডিভকে কেন্দ্র করে।

আপনি একাধিক কলামকে কেন্দ্র করতে একই পদ্ধতিটি ব্যবহার করতে পারেন, আপনাকে আরও বেশি ডিভ স্তর যুক্ত করতে হবে:

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

দ্রষ্টব্য: আমি এমডি, এসএম এবং এক্স এর জন্য কলাম 12 এর সাথে একটি ডিভ যুক্ত করেছি, যদি আপনি ব্যাকগ্রাউন্ড রঙের সাথে প্রথম ডিভটি না করেন (এই ক্ষেত্রে "ব্লুভায়োলেট") ধসে পড়বে, আপনি শিশু ডিভগুলি দেখতে সক্ষম হবেন , তবে পটভূমির রঙ নয়।

Answer 10

বুটস্ট্র্যাপের আসল সংস্করণে 4.3.1 ব্যবহার করুন

শৈলী

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

কোড

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

Answer 11

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

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

Answer 12

বুটস্ট্র্যাপ 4 এ, ব্যবহার করুন:

<div class="d-flex justify-content-center">...</div>

আপনি যা চান তার উপর নির্ভর করে আপনি অবস্থান পরিবর্তন করতে পারেন:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

উল্লেখ এখানে

Answer 13

এখানে সাধারণ সিএসএস বিধি রয়েছে যা কোনও ডিভকে কেন্দ্র করে রাখে

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

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Comments

আপনি আপনার উত্তর প্রসারিত করতে পারেন? লিঙ্কগুলি সময়ের সাথে সাথে বাসি হয়ে যায়।

— অরিক

এছাড়াও, এটি অর্জনের এটি "বুটস্ট্র্যাপ উপায়" নয়।

— ফিউরিয়াসফোল্ডার

Answer 14

সহজ সমাধান নীচের মত উভয় পক্ষের মধ্যে একটি ফাঁকা কলাম যুক্ত করা হবে:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

Answer 15

jsFiddle

এইচটিএমএল :

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

সিএসএস :

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}