বুটস্ট্র্যাপের সাহায্যে কীভাবে কোনও চিত্র মৃত কেন্দ্রটিকে সারিবদ্ধ করা যায়

Question

আমি বুটস্ট্র্যাপ কাঠামো ব্যবহার করছি এবং সাফল্য ছাড়াই একটি চিত্র অনুভূমিকভাবে কেন্দ্রে নেওয়ার চেষ্টা করছি ..

আমি 12 টি গ্রিড সিস্টেমকে 3 টি সমান ব্লকে যেমন বিভক্ত করার মতো বিভিন্ন কৌশল চেষ্টা করেছি

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

পৃষ্ঠার তুলনায় কোনও চিত্র কেন্দ্রীভূত করার সবচেয়ে সহজ পদ্ধতিটি কী?

Comments

এবং বিটিডব্লিউ। আপনি "অফসেটিং কলাম"-সেকশনটি একবার দেখতে চান। twitter.github.com/bootstrap/scaffolding.html#gridSystem

— mind85

কেউ উত্তর হিসাবে না হিসাবে এটি পতাকাঙ্কিত করেছে, এবং আমি সম্মত। এটি একটি মন্তব্য হিসাবে যুক্ত করুন, এবং আপনার উত্তর শীঘ্রই মুছে ফেলা হবে।

— tckmn

আপনি যদি img-responsiveআপনার এর উপর বর্গ imgট্যাগ, ইমেজ কেন্দ্র নাও করতে পারে। কেন বুটস্ট্র্যাপশ্রেণিব্যবহার করেসেই সমস্যাটিকে বুটস্ট্র্যাপের উপায়ে সমাধান করা হবে তারব্যাখ্যার জন্য এই এসও উত্তরটি দেখুনcenter-block।

— সিএসফাস

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে আপনি এটি করতে পারেন: stackoverflow.com/a/59469712/4654957

— দিয়েগো ভেনানসিও

Answer 1

টুইটার বুটস্ট্র্যাপ v3.0.3 এর একটি শ্রেণি রয়েছে: কেন্দ্র-ব্লক

কেন্দ্রের সামগ্রী ব্লক blocks

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

শুধু একটি বর্গ যোগ করতে হবে .center-blockএ imgভালো দেখায় ট্যাগ,

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

বুটস্ট্র্যাপে ইতিমধ্যে সিএসএস স্টাইল কল রয়েছে। সেন্টার-ব্লক

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

আপনি এখান থেকে একটি নমুনা দেখতে পারেন

Comments

ডিভি- র বন্ধের </div>ট্যাগটি containerঅনুপস্থিত দেখাচ্ছে। এটি আমার পক্ষে v3.3.7 এ কাজ করে না

— তারাবিতে 9'18

Answer 2

এটি করার সঠিক উপায়

<div class="row text-center">
  <img ...>
</div>

Comments

যখন এটি ব্যবহার করে এই আমার জন্য না কাজ এই - startbootstrap.com/round-about .. কিন্তু একটি বর্গ যোগ center-blockকরার <img>উপাদান কাজ ..

— Sumeet Pareek

পাঠ্য-কেন্দ্র ইমগ-প্রতিক্রিয়াশীল শ্রেণী সহ চিত্রগুলিতে কাজ করবে না তবে উপরে মন্তব্য (কেন্দ্র-ব্লক সম্পর্কে) এই সমস্যার সমাধান করে

— ট্রোজান

একটি পর্যবেক্ষণ: বুটস্ট্র্যাপ v3.1.0 এ কলামে টেক্সট-কেন্দ্র যুক্ত করে কলামে img- প্রতিক্রিয়াশীল করা সম্ভব। এই আচরণটি v3.3.4 এ ভাঙা হয়েছে। খুবই বিরক্তিকর. সিএসএস চুষে দেয়।

— f470071

এর পরিবর্তে আপনার সেন্টার-ব্লকটি ব্যবহার করা উচিত, যেমন ডক্সে

— Nacho

Answer 3

আপডেট 2018

center-blockশ্রেণী আর বিদ্যমান বুটস্ট্র্যাপ 4 । বুটস্ট্র্যাপ 4 এ একটি চিত্র কেন্দ্র করতে, ব্যবহার করুন mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Comments

'আপডেট 2018'-তে সামান্য ব্যাখ্যা যুক্ত করতে এমএক্স-অটো বাম এবং ডান মার্জিনগুলিকে অটোতে সেট করে; ডি-ব্লক সেট প্রদর্শন: ব্লক

— মাইকেল মরিয়ার্টি

Answer 4

ক্লাস হিসাবে চিত্রটিতে 'সেন্টার-ব্লক' যুক্ত করুন - কোনও অতিরিক্ত সিএসএসের প্রয়োজন নেই

<img src="images/default.jpg" class="center-block img-responsive"/>

Comments

নিশ্চিত না কেন -1 - এটি সবচেয়ে উত্তরের উত্তর! এটি বুটস্ট্র্যাপে সহায়তাকারী শ্রেণি বিল্ড ব্যবহার করে।

— ব্যবহারকারী 2562923

বুটস্ট্র্যাপ 4, ব্যবহার mx-autoপরিবর্তেcenter-block

— Quantum7

Answer 5

টুইটার বুটস্ট্র্যাপের একটি শ্রেণি রয়েছে যা কেন্দ্র:। পৃষ্ঠা-কেন্দ্রিক

এটি আমার জন্য কাজ করেছে:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

ক্লাসের জন্য সিএসএস হ'ল:

.pagination-centered {
  text-align: center;
}

Comments

নাকি .text-centerক্লাস?

— ট্র্যাজার

Answer 6

আপনি নিম্নলিখিত ব্যবহার করতে পারে। এটি উপরের বুটস্ট্র্যাপ 3.x সমর্থন করে।

<img src="..." alt="..." class="img-responsive center-block" />

Comments

এর জন্য ধন্যবাদ. আজ আমার যা দরকার ছিল।

— রায়ান উইলসন

Answer 7

ধরে নিই ছবির পাশাপাশি আর কিছু নেই, পিতামাতার text-align: centerমধ্যে ব্যবহারের সর্বোত্তম উপায় img:

.row .span4 {
    text-align: center;
}

সম্পাদন করা

অন্যান্য উত্তরে উল্লিখিত হিসাবে, আপনি বুটস্ট্র্যাপ সিএসএস ক্লাসটি .text-centerপ্যারেন্ট উপাদানগুলিতে যুক্ত করতে পারেন । এটি ঠিক একই কাজ করে এবং উভয় v2.3.3 এবং v3 এ উপলব্ধ

Comments

পারফেক্ট - যে কাজ করে। তবে বলুন আমার কাছে চিত্রের নীচে একটি <ul> উপাদান রয়েছে ... এটি আশানুরূপভাবে কেন্দ্রটি সারিবদ্ধ করে না, আমি যুক্ত করতে পারি এমন কি কিছু আছে? ধন্যবাদ

— ফিক্সার

টুইটার বুটস্ট্র্যাপের মূল ক্লাসগুলির একটিতে .row। আমি এই পৃষ্ঠায় টুইটার .github.com/bootstrap/index.html ক্লাস মাস্টহেড সহ একটি নতুন শ্রেণীর সংজ্ঞা দেওয়ার পরামর্শ দিচ্ছি ।

— বাপ্তম্ন করুন

@ ফিক্সার দ্য সেন্টারটি <ul>এখনও সারিবদ্ধ করা উচিত: jsfiddle.net/N74N7/1 অবশ্যই এটির অন্যান্য সিএসএস কোড থাকতে হবে

— আমার হেড হার্টস

2 বা 3 ঘন্টা বেশি সময় ব্যয় করেছে এবং কেবল এই লাইন ... ধন্যবাদ!

— আলামিন

Answer 8

আমার জন্য কাজ কর. ব্যবহার করার চেষ্টা করুনcenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Answer 9

আমার একই প্রয়োজন এবং আমি এখানে সমাধানটি পেয়েছি:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

এবং সিএসএসে:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Comments

আমি মনে করি বুটস্ট্র্যাপের লোকদের এটি তাদের CSS এ যুক্ত করা দরকার

— মুহাম্মদ আহসান

হাই, এবং ধন্যবাদ! আমি এখন বুটস্ট্র্যাপ ভি 3 ব্যবহার করছি। আমি এটি আমার আইএমজি ধারক ডিভিতে যুক্ত করেছি, তাই জিনিসগুলি কাজ করতে আমার ডিভের জন্য আমাকে সঠিক প্রস্থ (কমপক্ষে) নির্দিষ্ট করতে হয়েছিল। আপনার যদি ধারক বা ভিন্ন আকারের চিত্র না থাকে তবে এই চিত্রটি আপনার চিত্রটিতে যুক্ত করুন।

— ইনান

Answer 10

আপনি বুটস্ট্র্যাপ ইমগ ক্লাসের সাথে মার্জিন সম্পত্তি ব্যবহার করতে পারেন।

.name-of-class .img-responsive { margin: 0 auto; }

Answer 11

মনে হচ্ছে ব্রাউজার সংস্করণটি যদি সমস্যা না হয় তবে আমরা একটি নতুন এইচটিএমএল 5 বৈশিষ্ট্যটি ব্যবহার করতে পারি:

এইচটিএমএল ফাইলগুলিতে:

<div class="centerBloc">
  I will be in the center
</div>

এবং সিএসএস ফাইলে আমরা লিখি:

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

এবং তাই ডিভ ব্রাউজারে পুরোপুরি কেন্দ্র হতে পারে।

Comments

আপনার ডিভের ক্লাসকে বলা হয়। সেন্টার ব্লক এবং আপনার সিএসএস ফাইল শোয়ের বডি। লোডিংডিভ ...

— মার্টিন

ঠিক এখনই @ মার্টিন

— dtechplus

Answer 12

আপনার ব্যবহার করা উচিত

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

Answer 13

আমি justify-content-centerএকটি ধারক মধ্যে এক সারিতে ক্লাস ব্যবহার করছি । বুটস্ট্র্যাপ 4 দিয়ে ভাল কাজ করে।

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

Answer 14

আমি এটি তৈরি করেছি এবং সাইট.css এ যুক্ত করেছি।

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

Answer 15

আপনি নীচের মত আগের সমাধানের সিএসএস পরিবর্তন করতে পারেন:

.container, .row { text-align: center; }

এটি পিতামাতার সমস্ত উপাদানকেও কেন্দ্র করে নেওয়া উচিত div।