পাঠ্য-সারিবদ্ধ কেন্দ্র ব্যবহার করে কেন্দ্রের চিত্র?

Question

সম্পত্তি কি text-align: center;সিএসএস ব্যবহার করে কোনও চিত্রকে কেন্দ্র করার ভাল উপায়?

img {
    text-align: center;
}

Comments

jsfiddle.net/j6q4d810/1 এটি কোনও প্রস্থ এবং উচ্চতার সাথে সূক্ষ্মভাবে কাজ করে

— gmarsi

Answer 1

text-alignসম্পত্তিটি ইনলাইন উপাদানগুলিতে নয়, ব্লক পাত্রে প্রযোজ্য হিসাবে এটি কাজ করবে না এবং imgএটি একটি ইনলাইন উপাদান। দেখুন W3C এর স্পেসিফিকেশন ।

পরিবর্তে এটি ব্যবহার করুন:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Comments

আমি এই পদ্ধতিটি চেষ্টা করেছিলাম এবং এটি কাজ করে! তবে আমি যখন 2 টি চিত্র চেষ্টা করেছি, এটি কাজ করে না, এটি কেবল টোটেমের মতো একে অপরের উপরে স্ট্যাক করে, কোনও ধারণা কীভাবে 2 টি চিত্রকে মাঝখানে একই লাইনে সারিবদ্ধ করা যায়?

— প্যাট্রিকগ্যাম্বোয়া

কীভাবে এটি ডব্লু 3 সি দ্বারা সমর্থিত নয়? আপনি কি এই দাবির পিছনে লিঙ্ক সরবরাহ করতে পারেন?

— মাদারার ঘোস্ট

@ সেকেন্ড রিকুডো: text-alignনামটি বোঝা যায় এমনটি পাঠ্যকে কেন্দ্র করে রাখার জন্য। ব্লক উপাদানগুলির margin: 0 auto;জন্য, প্রস্তাবিত পদ্ধতি।

— মিছিফ

@ মিঃরিচ ইমেজগুলি ব্লক নয়, ইনলাইন উপাদান। text-alignতাদের উপর ঠিক পাশাপাশি কাজ করে।

— মাদারার ঘোস্ট

এই ব্যাখ্যাটি কি এক রকম অদ্ভুত নয়? আপনি বলছেন যে 'পাঠ্য-প্রান্তিককরণ' ব্লকগুলিতে প্রয়োগ হয় এবং ইনলাইনগুলি নয়, যা আমি বিশ্বাস করি, তবে আপনি আক্ষরিকভাবে এটি একটি ব্লক উপাদানগুলিতে পরিবর্তন করেন তবে টেক্সট-সারিবদ্ধকরণ এড়ানো উচিত। আমি বলতে চাইছি আপনার কোডটি কাজ করে, তবে সেই অনুচ্ছেদটি সম্পূর্ণরূপে বানানো দরকার, ইমো।

— অক্টোপাস

Answer 2

এটি সর্বদা কার্যকর হয় না ... যদি এটি না হয় তবে চেষ্টা করুন:

img {
    display: block;
    margin: 0 auto;
}

Answer 3

আমি এই পোস্টটি জুড়ে এসেছি এবং এটি আমার পক্ষে কাজ করেছে:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(উল্লম্ব এবং অনুভূমিক প্রান্তিককরণ)

Answer 4

এটি করার আরেকটি উপায় হ'ল একটি ঘেরের অনুচ্ছেদটিকে কেন্দ্র করে:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Comments

আমি দ্বিমত পোষণ করব, আমি মনে করি এটি প্রশ্নের উত্তর দেয়। ওপি জিজ্ঞাসা করেছিল যে সম্পত্তিটি text-align: centerকোনও চিত্রের কেন্দ্রস্থল করার একটি ভাল উপায়, এবং নির্দিষ্ট করে দেয় না যে সম্পত্তিটি আইএমজি ট্যাগের অংশ হতে হবে। এই উত্তর একটি সমাধান সরবরাহের প্রয়াসে প্রশ্নের সম্পত্তিটিকে ব্যবহার করে (এটি কাজ করে)।

— মান্ডম

এটি আমার জন্য কাজ করেছিল যখন প্রদর্শন: ব্লক, ইত্যাদি না করে।

— ম্যাথিউশীট

Answer 5

আপনি করতে পারেন:

<center><img src="..." /></center>

Comments

দুর্ভাগ্যক্রমে, <center>এইচটিএমএল 5 তে সমর্থিত নয়, তবে জঘন্য, এটি কাজ করে।

— আইরাত

Answer 6

আসলে, আপনার কোডের সাথে একমাত্র সমস্যাটি হ'ল এই text-alignবৈশিষ্ট্যটি ট্যাগের অভ্যন্তরে পাঠ্যের (হ্যাঁ, চিত্রগুলি টেক্সট হিসাবে গণনা করা) প্রযোজ্য। আপনি spanচিত্রটির চারপাশে একটি ট্যাগ রাখতে এবং এর স্টাইলটি সেট করতে চান text-align: center:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

চিত্রটি কেন্দ্রিক হবে। আপনার প্রশ্নের জবাবে, এটি চিত্রগুলির কেন্দ্রের সবচেয়ে সহজ এবং সবচেয়ে বোকা উপায়, যতক্ষণ না আপনি ইমেজটিতে থাকা span(বা div) বিধি প্রয়োগ করার কথা মনে রাখবেন ।

Comments

একটি spanউপাদান display: inline;ডিফল্টরূপে হয়, সুতরাং text-align: center;এটি imgনিজেই রাখার মতো একই সমস্যার মধ্যে চলে । আপনি সেট করতে হবে spanকরতে display: block;বা সঙ্গে এটি প্রতিস্থাপন divএটির জন্য কাজ করতে।

— ওয়েব_ডিজাইনার

Answer 7

একটি উপাদানকে কেন্দ্র করার জন্য তিনটি পদ্ধতি রয়েছে যা আমি প্রস্তাব করতে পারি:

1. text-alignসম্পত্তি ব্যবহার

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

2. marginসম্পত্তি ব্যবহার

   img {
       display: block;
       margin: 0 auto;
   }

   <img src="https://placehold.it/60/60" />

3. positionসম্পত্তি ব্যবহার

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

---

প্রথম এবং দ্বিতীয় পদ্ধতিগুলি কেবল তখনই কাজ করে যদি পিতামাতারা কমপক্ষে চিত্রের মতো প্রশস্ত হয়। যখন চিত্রটি তার পিতামাতার চেয়ে প্রশস্ত হয় তখন চিত্রটি কেন্দ্রীভূত থাকবে না !!!

তবে: তৃতীয় পদ্ধতিটি এটির জন্য ভাল উপায়!

এখানে একটি উদাহরণ:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Comments

# 3 তাই সুনির্দিষ্ট আছে যে আমি বলে কেন্দ্রীভূত করতে পেরেছি করেছি imgএকটি সমর্থনযোগ্য ভিতরে divএকটি WebViewCSS এর ইনজেকশন সঙ্গে। ধন্যবাদ!

— জর্জিএএমভিএফ

Answer 8

কেবলমাত্র যদি আপনার ইন্টারনেট এক্সপ্লোরারের প্রাচীন সংস্করণগুলি সমর্থন করার প্রয়োজন হয়।

আধুনিক পদ্ধতির করণীয় margin: 0 auto আপনার সিএসএসে করা।

উদাহরণ এখানে: http://jsfiddle.net/bKRMY/

এইচটিএমএল:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

সিএসএস:

p.pic {
    width: 48px;
    margin: 0 auto;
}

এখানে কেবল সমস্যাটি হ'ল অনুচ্ছেদের প্রস্থ অবশ্যই চিত্রের প্রস্থের সমান হতে হবে । আপনি যদি অনুচ্ছেদে কোনও প্রস্থ না রেখে থাকেন তবে এটি কাজ করবে না, কারণ এটি 100% ধরে নেবে এবং আপনার চিত্রটি বামদিকে সরে যাবে, যদি না আপনি অবশ্যই ব্যবহার করেনtext-align:center ।

ঝাঁকুনি চেষ্টা করে দেখুন এবং ভাল লাগলে এটি ব্যবহার করুন।

Answer 9

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

Comments

স্বপ্নের শিকারি, আপনি যদি সিএসএস ব্যবহার করে কোনও চিত্র কেন্দ্রীকরণের বিকল্প পদ্ধতির প্রস্তাব দিচ্ছেন তবে আপনার প্রশ্নটি কিছুটা প্রসারিত করা দরকার। আপনি ব্যাখ্যা করতে পারেন কীভাবে এবং কেন এই প্রস্তাবিত বিকল্পটি প্রশ্নকারীর লক্ষ্য অর্জনের আরও ভাল উপায় হতে পারে, সম্ভবত প্রাসঙ্গিক ডকুমেন্টেশনের লিঙ্ক সহ। এটি তাদের কাছে এটি আরও দরকারী এবং অন্যান্য সাইটের পাঠকদের জন্য আরও দরকারী যারা একই ধরণের সমস্যার সমাধান খুঁজছেন।

— ভিন্স বোডরেন

Answer 10

আপনি যদি কোনও চিত্র সহ কোনও ক্লাস ব্যবহার করছেন তবে নিম্নলিখিতটি করবে

class {
    display: block;
    margin: 0 auto;
}

এটি যদি কোনও নির্দিষ্ট শ্রেণীর মধ্যে কেবলমাত্র একটি চিত্র যা আপনি কেন্দ্রের প্রান্তিককরণ করতে চান তবে নিম্নলিখিতগুলি তা করবে:

class img {
    display: block;
    margin: 0 auto;
}

Comments

আমি নীচের অংশটি পরিবর্তন করতে img.classবা একটি img.classসংস্করণ যুক্ত করব। এই জন্য Thx।

— চক সেভেজ

Answer 11

ধারক ধারণের চিত্রটিতে আপনি একটি সিএসএস 3 ফ্লেক্সবক্স ব্যবহার করতে পারেন উল্লিখিত এবং অনুভূমিকভাবে চিত্রের অভ্যন্তরে পুরোপুরি কেন্দ্রীভূত ।

ধরে নেওয়া যাক আপনার কাছে চিত্র ধারক হিসাবে <ডি ক্লাস = "ধারক" রয়েছে:

তারপরে সিএসএস হিসাবে আপনাকে ব্যবহার করতে হবে:

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

এবং এটি এই ডিভের ভিতরে আপনার সমস্ত সামগ্রী পুরোপুরি কেন্দ্রিক করে তুলবে।

Comments

ন্যায্য বিষয়বস্তুতে whet <p> ?? এ সেট অ্যালাইন করার জন্য ব্যবহার করতে পারে?

— মনজিথা তিশার

এই আমি চেয়েছিলাম। ধন্যবাদ.

— ডিওন কিম

Answer 12

আমি খুঁজে পাওয়া সবচেয়ে সহজ সমাধানটি হ'ল এটি আমার img- উপাদানগুলিতে যুক্ত করা:

style="display:block;margin:auto;"

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

Comments

কেবলমাত্র অটো মানে auto auto auto autoএবং 0 autoমানে 0 auto 0 auto... এবং নীচের এবং শীর্ষের মার্জিনের জন্য ডিফল্টরূপে স্বয়ংক্রিয়ভাবে 00 যুক্ত করা হয় বা ঠিক তেমন হয় না তবে এই ক্ষেত্রে আপনাকে ইতিমধ্যে সরবরাহ করা একটি নবম সদৃশ জবাব দেয়

— তেমানি আফিফ

আপনার মন্তব্য কেন এটি কাজ করে তা ব্যাখ্যা করে। গ্রেট। তবে পূর্ববর্তী উত্তরগুলির মধ্যে কোনটি '0' ছাড়াই প্লেইন 'অটো' কাজ করে বলেছে? সেই সত্যটি কি উল্লেখ করার মতো নয়?

— পানু লজিক

এক্ষেত্রে এটি একটি মন্তব্য হওয়া উচিত, কারণ এই বিশেষ ক্ষেত্রে উভয়ই একই। আমি মনে করি আমরা সব সমতুল্য মান, এই ক্ষেত্রে আমরা লিখতে পারি এ জন্য একটি উত্তর থাকা উচিত না: auto, auto auto, auto auto auto, auto auto auto auto, 0 auto 0, 0 auto, 0 auto 0 auto, ইত্যাদি ... আপনি কি মনে করেন প্রতিটি এক একটি ভিন্ন উত্তর প্রাপ্য? আমি তাই মনে করি না.

— তেমনী আফিফ

আমি এটি বলব না যে সিএসএসের দুটি ভিন্ন বিভাগ যদি একই শেষ ফলাফল তৈরি করে, তবে এই দুটি সিএসএস-বিভাগগুলি "একই"। তাদের আউটপুট একই তবে তাদের উত্স-কোড এক নয়। সাধারণ হিসাবে আপনি একই আউটপুট উত্পাদন যে বিভিন্ন প্রোগ্রাম যে কোনও সংখ্যা লিখতে পারেন। তারপরে এই জাতীয় "সমতুল্য" প্রোগ্রামগুলির মধ্যে কোনটি সবচেয়ে সহজ এবং সংক্ষিপ্ততম লেখার মতো বলে মনে হয় তা জানার জন্য (এবং জিজ্ঞাসিত লোকদের বলুন) মূল্যবান।

— পানু লজিক

এবং এই সমস্ত একটি উত্তরের মধ্যে লেখা উচিত। এই কারণেই এই উত্তরটি একটি সম্পূর্ণ নতুন উত্তরের চেয়ে মন্তব্য হিসাবে বেশি উপযুক্ত। আমাদের সকল সমতুল্য জিনিস একসাথে উপস্থাপন করা উচিত এবং তাদের পৃথক বৈশিষ্ট্য তৈরি করা উচিত নয় যা এটিকে পুরোপুরি আলাদা বলে মনে হতে পারে কারণ এটি [আমার মতামত বিটিডব্লিউ, এটির সাথে একমত হওয়ার বা বিপরীতে তর্ক করার দরকার নেই]। এবং আমি বিভিন্ন প্রোগ্রামগুলির কথা বলছি না যা একই আউটপুট উত্পাদন করে, এটি সম্পূর্ণ ভিন্ন জিনিস কারণ যুক্তিটি একই নাও হতে পারে। এখানে আমরা একই সম্পত্তি এবং একই মান সম্পর্কে ( i++যেমন একইরকম i+=1) কথা

— বলছি

Answer 13

সহজভাবে পিতামাতার প্রান্তিককরণ পরিবর্তন করুন :)

পিতামাতার বৈশিষ্ট্যগুলির জন্য এটি ব্যবহার করে দেখুন:

text-align:center

Answer 14

আপনি text-align: centerপিতামাতাকে ব্যবহার করতে পারেন এবং এতে পরিবর্তন করতে imgপারেন display: inline-block- এটি কোনও পাঠ্য-উপাদানগুলির মতো আচরণ করে এবং পিতামাতার প্রস্থ থাকলে এটি কেন্দ্রিক হবে!

img {
    display: inline-block
}

Answer 15

আমি একটি চিত্র মধ্যবর্তী সারিতে একটি ডিভ ব্যবহার করব would যেমন:

<div align="center"><img src="your_image_source"/></div>

Answer 16

আপনি যদি চিত্রটিকে ব্যাকগ্রাউন্ড হিসাবে সেট করতে চান তবে আমার একটি সমাধান পেয়েছে:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

Answer 17

কোনও ব্যাকগ্রাউন্ড চিত্র কেন্দ্র করতে আপনি চিত্রটি একটি ইনলাইন (ডিফল্ট আচরণ) বা একটি ব্লক উপাদান হিসাবে প্রদর্শন করতে চান কিনা তার উপর নির্ভর করে।

ইনলাইন কেস

আপনি যদি চিত্রটির সিএসএস বৈশিষ্ট্যের ডিফল্ট আচরণ রাখতে চান তবে আপনাকে নিজের ছবিটি অন্য একটি ব্লক উপাদানের মধ্যে আবদ্ধ করতে হবে যা আপনাকে অবশ্যই সেট করতে হবে text-align: center;

ব্লকের কেস

আপনি যদি ইমেজটিকে তার নিজের একটি ব্লক উপাদান হিসাবে বিবেচনা করতে চান, তবে text-alignসম্পত্তি কোনও সংবেদন তৈরি করে না এবং এর পরিবর্তে আপনার এটি করা উচিত:

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

আপনার প্রশ্নের উত্তর:

সম্পত্তি পাঠ্য-সারিবদ্ধ: কেন্দ্র; সিএসএস ব্যবহার করে একটি চিত্র কেন্দ্রের একটি ভাল উপায়?

হ্যা এবং না.

• হ্যাঁ, চিত্রটি যদি তার মোড়কের ভিতরে কেবলমাত্র উপাদান হয়।
• না, যদি আপনার চিত্রটির মোড়কের ভিতরে অন্যান্য উপাদান থাকে তবে সমস্ত শিশু উপাদান যা চিত্রের ভাইবোন হয় তারা text-alignসম্পত্তিটির উত্তরাধিকারী হবে : এবং হতে পারে আপনি এই পার্শ্ব প্রতিক্রিয়াটি পছন্দ করবেন না।

তথ্যসূত্র

1. ইনলাইন উপাদানগুলির তালিকা
2. কেন্দ্রিক জিনিস

Answer 18

স্কেল করার আরও একটি উপায় - এটি প্রদর্শন করুন:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

Answer 19

এটি আপনার imgসিএসএসে ব্যবহার করুন :

img {
  margin-right: auto;
  margin-left: auto;
}

Answer 20

display: blockআমার সাথে margin: 0কাজ করে না, না কোনও text-align: centerউপাদান দিয়ে মোড়ানো ।

এটি আমার সমাধান:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX বেশিরভাগ ব্রাউজার দ্বারা সমর্থিত

Comments

তুমি কি বোঝাতে margin: 0 auto;চাও? কীটি সেটিংস করছে margin-leftএবং margin-rightকরছে auto। margin: 0 auto;এটির জন্য কেবল একটি শর্টকাট।

— ওয়েব_ ডিজাইনার

@Web_Designer আমি চেষ্টা margin: 0 auto, margin: 0এবং margin: autoকেউ কাজ করেন। নোট করুন যে ক্রোমের পরিদর্শক, ব্যবহার করার সময় margin: 0 auto, সম্পত্তিটিকে একটি invalid property value

— বিস্মৃত

আমি মনে করি আপনি "অবস্থান: পরম;" "প্রদর্শন: পরম;" এর পরিবর্তে

— ওয়েবদেবডানিয়েল

টাইপগুলি নির্দেশ করার জন্য @ ওয়েবড্যাবডানিয়েলকে ধন্যবাদ জানাই। হায় যাইহোক, আপনি উভয়ই বেশ ভালভাবে কাজ করার relativeপরিবর্তে পজিশনিং ব্যবহার করতে চাইতে পারেন absolute।

— ওভারকোডার

Answer 21

আমি আবিষ্কার করেছি যে একটিতে যদি আমার একটি চিত্র এবং কিছু পাঠ্য থাকে divতবে আমি ব্যবহার করতে পারিtext-align:center পাঠ্য এবং চিত্রটিকে এক ঝাঁকুনিতে প্রান্তিককরণ করতে ।

এইচটিএমএল:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

সিএসএস:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

কোডপেন: https://codepen.io/artforLive/pen/MoBzrL?editors=1100

Answer 22

কখনও কখনও আমরা পৃষ্ঠাগুলির অভ্যন্তরে ওয়ার্ডপ্রেস প্রশাসকের মধ্যে সামগ্রী এবং চিত্রগুলি সরাসরি যুক্ত করি। আমরা যখন সামগ্রীটির ভিতরে চিত্রগুলি sertোকাই এবং সেই কেন্দ্রটি সারিবদ্ধ করতে চাই। কোডটি প্রদর্শিত হবে:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

সেক্ষেত্রে আপনি এই জাতীয় CSS সামগ্রী যুক্ত করতে পারেন:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Answer 23

ব্যবহার করুন:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

আমি মনে করি লারাভেল কাঠামোয় এটি কোনও চিত্রকে কেন্দ্র করার উপায়।

Answer 24

.img-container {
  display: flex;
}

img {
  margin: auto;
}

এটি উভয়ভাবে উলম্ব এবং অনুভূমিকভাবে চিত্রের কেন্দ্র তৈরি করবে