একটি ডিভের মধ্যে কীভাবে একটি চিত্র উল্লম্বভাবে সারিবদ্ধ করা যায়

Question

কীভাবে আপনি একটি ধারণাগুলির অভ্যন্তরে একটি চিত্র সারিবদ্ধ করতে পারেন div?

উদাহরণ

আমার উদাহরণে, আমাকে " <img>এর <div>সাথে উল্লম্বভাবে কেন্দ্রটি স্থাপন করতে হবে class ="frame:

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameএর উচ্চতা স্থির এবং চিত্রটির উচ্চতা অজানা। আমি .frameযদি নতুন সমাধান যুক্ত করতে পারি তবে এটিই একমাত্র সমাধান। আমি ইন্টারনেট এক্সপ্লোরার 7 এবং এর পরে ওয়েবকিট, গেকোতে এটি করার চেষ্টা করছি।

এখানে jsfiddle দেখুন ।

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Comments

হ্যালো, দুঃখিত তবে আমি এখানে কোনও সহায়ককে সর্বাধিক মূল্যবান সমাধান হিসাবে ব্যবহার করার বিষয়ে একমত নই। তবে এটি একমাত্র উপায় নয়। অন্যরা ব্রাউজার দ্বারা সমর্থিত। আমি এখানে stackoverflow.com/a/43308414/7733724 এবং W3C.org তথ্য সম্পর্কে একটি সমাধান অফার করছি। আপনি পরীক্ষা করতে পারেন। চিয়ার্স

— স্যাম

ডাব্লু

— কিউমাস্টার

সিএসএস

— মাইকেল ইউরিন

Answer 1

আমি জানি যে একমাত্র (এবং সেরা ক্রস ব্রাউজার) উপায় হ'ল উভয় উপাদানগুলির inline-blockসাথে height: 100%এবং কোনও সহায়ক ব্যবহার করা vertical-align: middle।

সুতরাং একটি সমাধান আছে: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

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

ইন্টারনেট এক্সপ্লোরার সহ :beforeএবং এর expression()জন্য সমাধান : http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

---

কিভাবে এটা কাজ করে:

1. যখন আপনার inline-blockএকে অপরের কাছাকাছি দুটি উপাদান থাকে, আপনি একে অপরের পাশে সারিবদ্ধ করতে পারেন, যাতে এর সাথে vertical-align: middleআপনি এই জাতীয় কিছু পাবেন:

   

2. আপনার যখন নির্দিষ্ট উচ্চতা (ইন px, emবা অন্য কোনও পরম ইউনিট) সহ একটি ব্লক থাকে তখন আপনি অভ্যন্তরীণ ব্লকের উচ্চতা সেট করতে পারেন %।

3. সুতরাং, এক যোগ inline-blockদিয়ে height: 100%সংশোধন করা হয়েছে উচ্চতার সঙ্গে সঙ্গে একটি ব্লক অন্য সারিবদ্ধ হবে inline-blockতাতে উপাদান ( <img/>উল্লম্বভাবে এটা কাছাকাছি আপনার ক্ষেত্রে)।

Comments

আপনি নিজের জন্য দেখতে পারেন: jsfiddle.net/kizu/Pw9NL - কেবল ইনলাইন বাক্সগুলি একটি বাক্স তৈরি করে না, তবে অন্যান্য সমস্ত ক্ষেত্রে ঠিক আছে।

— কিজু

খুব ভাল উত্তর। আমি ইনলাইন ব্লক উপাদানগুলির মধ্যে ফাঁকা জায়গাগুলির সাথে লড়াই করে যাচ্ছি যার অর্থ .frameএবং এর মধ্যে .frame:before। এখানে প্রস্তাবিত একটি সমাধান হ'ল যুক্ত margin-left: -4pxকরা .frame। আশাকরি এটা সাহায্য করবে.

— মিক

অর্থপ্রদানের মনোযোগ দিন: যে সহায়কটি যুক্ত হয়েছিল <img src=""/>তার ভিতরে নেই <span></span>। এটা বাইরে। আমি এটি উপলব্ধি না করে কেবল আমার চুলের প্রতিটি স্ট্র্যান্ড টানলাম।

— রায়ান

দেখে মনে হচ্ছে আপনারও "হোয়াইট স্পেস: নওর্যাপ" যুক্ত করা দরকার; আপনার চিত্র এবং সহায়ক স্প্যানের মধ্যে লাইন ব্রেক থাকলে আপনার ফ্রেমে বা আপনি কোনও সমস্যাতে চলে আসবেন। এই সমাধানটি আমার পক্ষে কাজ করছে না কেন আমাকে এক ঘন্টা সময় লেগেছে।

— juminoz

আমার ক্ষেত্রে, আমার চিত্রটির সর্বোচ্চ-উচ্চতা এবং সর্বোচ্চ-প্রস্থ উভয়ই 100% এ সেট করা হয়েছে যাতে চিত্রটি ধারকটিকে স্কেল করে দেয় এবং এই পদ্ধতিটি কার্যকর হয়নি not আমার সমাধানটি হ'ল এই মানগুলি 90% (যা আমার ক্ষেত্রে ঠিক ছিল; অন্য পরিস্থিতিতে আপনাকে সেই অনুযায়ী ধারকটি স্কেল করতে হবে), এবং চিত্রের অন্য দিকে কোনও সহায়ক যুক্ত করুন যাতে প্যাডিং এমনকি থাকবে on উভয় পক্ষের.

— এরিক ডাবé

Answer 2

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

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

Comments

আপনি যদি অনুভূমিকভাবে চিত্রটি সারিবদ্ধ করতে চান তবে বামে যুক্ত করুন: 0; ডান: 0; img

— জেমসকিন্ড

এটি কি আই 10 তে কাজ করছে না? আমি এই জায়গা জুড়ে ব্যবহার করছি

— ম্যাক্স ইয়ারি

কনটেইনার ডিভ থাকার সাথেও (আমার জন্য) কাজ করেposition:fixed;

— পিজে ব্রুনেট

সবচেয়ে সহজ এবং পরিষ্কার সমাধান ধন্যবাদ!

— কেডিটি

ধন্যবাদ! আমার জন্য কাজ করেছেন !!

— আলেকজান্ডার ম্যালগিন

Answer 3

মেটেজক্র্যাম্নির সমাধানটি একটি ভাল শুরু, তবে বড় আকারের চিত্রগুলির একটি অনুপাত রয়েছে।

এখানে আমার কাঁটাচামচ:

ডেমো: https://jsbin.com/lidebapomi/edit?html,css , আউটপুট

---

এইচটিএমএল:

<div class="frame">
  <img src="foo"/>
</div>

সিএসএস:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Comments

এটি মানিয়ে নেওয়ার কোনও উপায় যাতে আপনি বড় আকারের চিত্রটি জুম করতে পারেন, 2x বলুন এবং এটি এখনও অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রীভূত থাকতে পারবেন?

— জাস্টিন

যদি আমরা এটিকে মধ্যের পরিবর্তে উল্লম্ব সারিবদ্ধ নীচে কাজ করতে চাই, তবে কোন কোডগুলি সংশোধন করা উচিত?

— বোবো

@ বাবু কেবলমাত্র অপসারণ করুন top: 0;। এর ফলাফল কেবল bottom: 0;উল্লম্বভাবে প্রয়োগ করা হয়।

— জোমো

সেরা উত্তর!

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

Answer 4

একটি তিন-লাইন সমাধান:

position: relative;
top: 50%;
transform: translateY(-50%);

এটি যে কোনও কিছুর জন্য প্রযোজ্য।

থেকে এখানে ।

Comments

উপসর্গ: -ms- বা -webkit- (রূপান্তর করার আগে)। w3schools.com/cssref/css3_pr_transform.asp

— জর্জি অর্পিনেল

আইই 9 এর উপসর্গ, তবে আইই 8 এবং এর চেয়ে কম কাজ করছে না: caniuse.com/#search=transfor তবে আমার মতামত: আমি আই 8 সম্পর্কে চিন্তা করি না

— রেজিমেন্ট। 85

যখন কেউ কেন্দ্রীভূত হবে তখন ডিভাইসের স্ক্রিনের চেয়ে লম্বা হয় এবং পিতামাতা ডিওএমের প্রথম সন্তান হ'ল কী ঘটেছিল কেউই খেয়াল করেনি?

— তাও

আপনি যখন position: absolute;প্রবাহিত প্রস্থের প্রয়োজন তখন যখন আপনি ব্যবহার করতে পারবেন না খুব ভাল ।

— plong0

এখন পর্যন্ত সেরা সমাধান, বেশিরভাগ সমস্ত ব্রাউজারকে আধুনিক এবং বয়স্কদের জন্য সমর্থন সহ, ফ্লেক্সবক্সের চেয়েও ভাল। দয়া করে এটিকে উত্সাহিত করুন

— 25:55

Answer 5

একটি খাঁটি সিএসএস সমাধান:

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}

<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

মূল জিনিস

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Comments

দয়া করে আমাকে আপনাকে এখানে এমন একটি গাইডের কাছে উল্লেখ করতে দিন যা এমনকি আই 5 এর জন্যও কাজ করে (আমি পোস্টে এতক্ষণ যা পড়েছি তা থেকে কেটে নেওয়া) ওয়েবমাস্টার

— মেটেজ

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

— জোমো

@ হান্সওয়ার্সচেন হ্যাঁ, তবে বিষয়টি কেন্দ্রবিন্দুতে, এটি বড় আকারের হয় কিনা তা ডিজাইনের পছন্দ। আরও সিএসএস = আরও বিশৃঙ্খলা যুক্ত করা হচ্ছে :)

— মতেজ

@matejkramny এটা না পেতে , oversized। যদি ইমেজ হয় , oversized, এটি একটি ভুল অনুপাত হয়েছে। এর অর্থ এটি উচ্চতায় প্রসারিত এবং সঠিকভাবে দেখায় না।

— জোমো

Ow বাহ, এটি উপচে পড়া চিত্রের সাথে কাজ করে (মোড়কের চেয়ে বড়), গৃহীত উত্তর দেয় না।

— সিড্রিক রাইচেনবাচ

Answer 6

আরও আধুনিক সমাধানের জন্য এবং যদি লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করার প্রয়োজন না হয় তবে আপনি এটি করতে পারেন:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}

<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

এখানে একটি কলম রয়েছে: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Comments

কনটেইনারটির উচ্চতা সেট না করা থাকলে এটি বিশেষত কার্যকর

— ডেভ বার্নেট

বা align-selfস্বতন্ত্র আইটেমগুলির জন্য

— মাইকেল

সমস্যাটি align-selfহ'ল ফ্লেক্স আইটেমগুলি মূল পাত্রে উচ্চতা প্রসারিত করবে।

— রিকার্ডো জিয়া

Answer 7

এইভাবে আপনি কোনও চিত্রকে উল্লম্বভাবে ( ডেমো ) কেন্দ্র করতে পারবেন :

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Comments

আশ্চর্যজনকভাবে আমি আমার পরিস্থিতিতে কাজ করার জন্য গ্রহণযোগ্য উত্তর পেতে পারি না (আমি ওভারফ্লো: লুকিয়ে থাকা চিত্রটিও কাটছিলাম)। এটি যদিও আগে কাজ করেছে ly

— লুকা স্পিলার

আমি কেবল ক্রোমে এটি পরীক্ষা করেছি, তবে লাইন-উচ্চতাটি মূল বলে মনে হচ্ছে। আমি ইমগের চেয়ে ডিভের উপরে উল্লম্ব-সারিবদ্ধ বৈশিষ্ট্যটি রেখেছি যদিও আমার আইএমজি একটি অ্যাঙ্কারের ভিতরে রয়েছে (<a/>)।

— টড দাম

হ্যাঁ, গ্রহণযোগ্য সমাধানটি আরও সহজ, এবং সুন্দরভাবে কাজ করে। আমি এই সমাধানটি jsfiddle এ খুঁজে পেয়েছি।

— vdboor

আপনি যদি উচ্চতাগুলি কীভাবে পূরণ করতে হয় তা যদি জানেন তবে এটি বেশ ভাল কাজ করে

— ক্রেক্কিডি

আমার expierence থেকে এই সমাধান শুধুমাত্র সঙ্গে কাজ font-size: 0জন্য div। বেশ বড় পাত্রে আপনি এটি মিস করতে পারেন তবে যদি আপনার div100px এবং img 80px হয় তবে এটি কয়েক পিক্সেল কম হবে।

— alTus

Answer 8

এছাড়াও, আপনি সঠিক ফলাফল অর্জন করতে ফ্লেক্সবক্স ব্যবহার করতে পারেন:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Answer 9

ফ্লেক্সবক্সের সাথে একটি দুর্দান্ত সহজ সমাধান রয়েছে !

.frame {
    display: flex;
    align-items: center;
}

Comments

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

— বিবি্ল্যাকউ

এটি আমার পক্ষেও কাজ করেছিল এটি সেরা উত্তর। তবে ফ্রেমের ক্ষেত্রে আমার ক্ষেত্রে "ইনলাইন-ফ্লেক্স" আরও ভাল কাজ করেছে। এবং এর অভ্যন্তরের চিত্রটির জন্য আমি যুক্ত করেছি: "উল্লম্ব-সারিবদ্ধ: মাঝারি"।

— সোফি কোপারম্যান

Answer 10

আপনি পিআই এর সিএসএস সেট করার চেষ্টা করতে পারেন display: table-cell; vertical-align: middle;

Comments

আমি বিভিন্ন পদ্ধতি দেখেছি, তবে এটি আমার কাছে নতুন (এমনকি ২০১৩ সালে) ছিল।

— মাইক ইবার্ট

চিত্রটিকে কেন্দ্র করে কেবল কোনও টেবিলের ভিতরে রাখার চেয়ে ভাল।

— জোনাটস

প্রদর্শন: আপনি প্রস্থটি 100% হতে চাইলে সারণী-ঘর সর্বদা সঠিক আকারে হয় না

— রেডটোপিয়া

" PI" কি?

— পিটার মর্টেনসেন

Answer 11

আপনি নীচের কোডটি চেষ্টা করতে পারেন:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

Answer 12

পটভূমি চিত্র সমাধান

আমি পুরোপুরি চিত্রের উপাদানটি সরিয়ে এটিকে একটি শ্রেণীর সাথে ডিভের পটভূমি হিসাবে সেট করেছি .frame

http://jsfiddle.net/URVKa/2/

এটি অন্তত ইন্টারনেট এক্সপ্লোরার 8, ফায়ারফক্স 6 এবং ক্রোম 13 এ সূক্ষ্মভাবে কাজ করে।

আমি পরীক্ষা করে দেখেছি এবং এই দ্রবণটি 25 পিক্সেলের উচ্চতার চেয়ে বড় চিত্রগুলিকে সঙ্কুচিত করতে কাজ করবে না। এমন একটি সম্পত্তি বলা হয় background-sizeযা উপাদানটির আকার নির্ধারণ করে তবে এটি সিএসএস 3 যা ইন্টারনেট এক্সপ্লোরার requirements এর প্রয়োজনীয়তার সাথে বিরোধ করবে।

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

Comments

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

— আরনাউড লে ব্ল্যাঙ্ক

এটি কোনও "। ফ্রেম উপাদান নয়" এটি "ফ্রেমের শ্রেণীর সাথে ডিভ"

— জেগালার্ডো

যদি চিত্রের উচ্চতা ফ্রেম

— ডিভের

Answer 13

আপনার কল্পনা করুন

<div class="wrap">
    <img src="#">
</div>

এবং সিএসএস:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Comments

Uau! ফ্লেক্স সত্যিই rulzzzz! ধন্যবাদ!

— পেড্রো ফেরেরিরা

আপনি যদি সন্তানের পিতামাতার পূর্ণ প্রস্থ গ্রহণ করতে চান এবং এখনও উলম্বভাবে মাঝখানে প্রান্তিকরিত হন তবে অবজেক্ট-ফিট কভারটি ব্যবহার করুন। ফ্লেক্স-বাক্স ব্যবহার করে পিতামাতাকে চিত্রের চারপাশে সরাতে css-tricks.com/snippets/css/a-guide-to-flexbox দেখুন

— mattdlockyer

Answer 14

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

ডেমো

http://jsfiddle.net/DZ8vW/1

সিএসএস

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    

জাভাস্ক্রিপ্ট

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Comments

খুশী হলাম। খাঁটি সিএসএস সমাধানের জন্য কোনও সুযোগ?

— আরনাউড লে ব্ল্যাঙ্ক

দুর্ভাগ্যক্রমে কোনও নয়, যদি না আপনি টেবিলগুলি ব্যবহার করতে চান বা IE এর পুরানো সংস্করণগুলির সাথে সামঞ্জস্যতা না ফেলে। :( আপনি যদি হাতের আগে ছবিগুলির সঠিক আকারটি জানতেন তবে এটি আলাদা হতে পারে, তবে এটি ছাড়া একা সিএসএসের মাধ্যমে এটি সম্ভব নয়

— জোসেফ মেরিকল

@ জোসেফ আপনি টেবিলগুলি দিয়ে এটি কীভাবে ঠিক করবেন?

— বেনিয়ামিন উদ্দিন দশ বিড়াল

@ বেঞ্জামিন উদ্দিন দশ কেট এটি অগোছালো তবে এটি করা যেতে পারে: jsfiddle.net/DZ8vW/2 (এটি পরামর্শ দেওয়া হয় না, তবে কাজ করা উচিত)

— জোসেফ মেরিকলে

ওয়েল এটি পুরোপুরি প্রয়োজন arnauds স্যুট। কোনও জেএস নয়, কেবল সিএসএস এবং এইচটিএমএল।

— বেনিয়ামিন উদ্দিন দশ বিড়াল

Answer 15

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

কী সম্পত্তি display: table-cell;জন্য .frame। Div.frameএটির সাথে ইনলাইন হিসাবে প্রদর্শিত হয়, সুতরাং আপনার এটি একটি ব্লক উপাদানগুলিতে মোড়ানো প্রয়োজন।

এটি ফায়ারফক্স, অপেরা, ক্রোম, সাফারি এবং ইন্টারনেট এক্সপ্লোরার 8 (এবং পরে) এ কাজ করে।

হালনাগাদ

ইন্টারনেট এক্সপ্লোরার 7 এর জন্য আমাদের একটি সিএসএস এক্সপ্রেশন যুক্ত করতে হবে:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Comments

গ্রেট। আই 7 for এর জন্য কোনও হ্যাক যা জাভাস্ক্রিপ্ট এড়ানো যাবে?

— আরনাউড লে ব্ল্যাঙ্ক

আমি নিশ্চিত নই, তবে সিএসএস এক্সপ্রেশনগুলি সাহায্য করবে। তবে সেগুলি জাভাস্ক্রিপ্টও। পার্থক্য, আপনি তাদের CSS ফাইলগুলিতে লিখেন, জেএস-এ নয়।

— ওয়েবারস

হ্যাঁ, দুর্দান্ত ধারণা। এটি আরও পরিচালনাযোগ্য হবে (স্ক্রিপ্টটি প্রয়োজন অনুযায়ী স্বয়ংক্রিয়ভাবে চালিত হবে), এবং এটি কেবল আই 7-এর হিসাবে অনুমিত হবে এটি ঠিক আছে।

— আরনাউড লে ব্ল্যাঙ্ক

Answer 16

আমার সমাধান: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Answer 17

কোডেপেনের এই ডেমোতে দেখানো হয়েছে এটি আধুনিক ব্রাউজারগুলির জন্য (সম্পাদনার সময় 2016) works

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

এটি অত্যন্ত গুরুত্বপূর্ণ যে আপনি হয় চিত্রগুলিকে একটি শ্রেণি দিন বা আপনার কেন্দ্রিক প্রয়োজন এমন চিত্রগুলি লক্ষ্য করতে উত্তরাধিকার ব্যবহার করুন। এই উদাহরণে আমরা .frame img {}এমনটি ব্যবহার করেছি যাতে কেবল একটি শ্রেণীর সাথে একটি ডিভ দ্বারা আবৃত চিত্রগুলি .frameলক্ষ্যবস্তু হয়।

Comments

শুধুমাত্র ie7, সারি লাইন উচ্চতা: 25px;

— AnglimasS

এটি ফায়ারফক্স এবং ক্রোমেও সঠিকভাবে প্রান্তিক করা বলে মনে হচ্ছে না ( jsfiddle.net/4RPFa/19 )

— Arnaud Le Blanc

Answer 18

বিশুদ্ধ CSS এর সঙ্গে এই সমাধান করার চেষ্টা করুন http://jsfiddle.net/sandeep/4RPFa/72/

হতে পারে এটি আপনার এইচটিএমএল এর প্রধান সমস্যা। আপনি যখন আপনার এইচটিএমএলে সি lass& র সংজ্ঞা দেন তখন আপনি কোট ব্যবহার করছেন না image height।

সিএসএস:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

আমি যখন imgট্যাগটি নিয়ে কাজ করি তখন 3 পিক্সেল থেকে 2 পিক্সেল স্থান ছেড়ে যায় top। এখন আমি হ্রাস পেয়েছি line-height, এবং এটি কাজ করছে।

সিএসএস:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

line-heightসম্পত্তি বিভিন্ন ব্রাউজারে ভিন্নভাবে অনুষ্ঠিত হয়। সুতরাং, আমাদের বিভিন্ন line-heightসম্পত্তি ব্রাউজার সংজ্ঞায়িত করতে হবে ।

এই উদাহরণটি দেখুন: http://jsfiddle.net/sandeep/4be8t/11/

line-heightবিভিন্ন ব্রাউজারে ভিন্ন সম্পর্কে এই উদাহরণটি পরীক্ষা করুন : ফায়ারফক্স এবং ক্রোমের ইনপুট উচ্চতার পার্থক্য

Comments

কাজ করে না (অন্তত ফায়ারফক্সে)। অনুপস্থিত উদ্ধৃতিগুলির জন্য, এটি এইচটিএমএল 5 এ অনুমোদিত (জানেন না কোন ডসটাইপটি যদিও জিসফিডেলে ব্যবহৃত হয়)

— লে ব্ল্যাঙ্ক

Answer 19

আমি নিশ্চিত ইন্টারনেট এক্সপ্লোরার সম্পর্কে নই, কিন্তু ফায়ারফক্স এবং Chrome অধীনে, আপনি একটি আছে যদি imgএকটি divধারক, নিম্নলিখিত সিএসএস বিষয়বস্তু কাজ করা উচিত। কমপক্ষে আমার পক্ষে এটি ভালভাবে কাজ করে:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Comments

দুর্ভাগ্যক্রমে, IE8 +। আমার জন্য ভাল, কিন্তু অন্যদের জন্য নাও হতে পারে।

— TheCarver

এছাড়াও নোট করুন যে display:table-cell;% এর প্রশস্ততা হিসাবে গ্রহণ করে না

— মিটমেট

Answer 20

একটি টেবিল এবং টেবিল ঘর ব্যবহার করে সমাধান

কখনও কখনও এটি টেবিল / টেবিল-ঘর হিসাবে প্রদর্শন করে সমাধান করা উচিত। উদাহরণস্বরূপ, একটি দ্রুত শিরোনামের পর্দা। এটি ডাব্লু 3 দ্বারাও প্রস্তাবিত উপায়। আমি আপনাকে W3C.org থেকে ব্লক বা চিত্র কেন্দ্রিককরণ নামক এই লিঙ্কটি চেক করার পরামর্শ দিচ্ছি।

এখানে ব্যবহৃত টিপসগুলি হ'ল:

• সম্পূর্ণ পজিশনিং পাত্রে টেবিল হিসাবে প্রদর্শিত
• টেবিল-ঘর হিসাবে প্রদর্শিত সামগ্রীর কেন্দ্রবিন্দুতে উল্লম্ব প্রান্তিক করা হয়েছে

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

ব্যক্তিগতভাবে আমি এই উদ্দেশ্যে ব্যবহারের সাহায্যকারীদের সম্পর্কে অসমত।

Answer 21

একটি সহজ উপায় যা আমার পক্ষে কাজ করে:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

এটি গুগল ক্রোমের পক্ষে খুব ভাল কাজ করে। এটি একটি অন্য ব্রাউজারে ব্যবহার করে দেখুন।

Answer 22

কোনও পাত্রে কোনও চিত্র কেন্দ্রীভূত করার জন্য (এটি একটি লোগো হতে পারে) পাশাপাশি কিছু পাঠ্যও রয়েছে:

মূলত আপনি ইমেজ মোড়ানো

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Answer 23

আপনি যদি পিক্সেল আকারের মার্জিনের সাথে বেঁচে থাকতে পারেন তবে কেবলমাত্র যুক্ত font-size: 1px;করুন .frame। তবে মনে রাখবেন, এখন 1 .frameমিম = 1 পিক্সে যার অর্থ, আপনাকেও পিক্সেলের মধ্যে মার্জিন সেট করতে হবে।

http://jsfiddle.net/feeela/4RPFa/96/

এখন এটি অপেরাতে আর কেন্দ্রিক নয় ...

Answer 24

আমারও একই সমস্যা ছিল। এটি আমার পক্ষে কাজ করে:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

Comments

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

— ভ্যাসিলিও পাসপালাস

Answer 25

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

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Answer 26

ব্যবহার tableএবং table-cellপদ্ধতি কাজটি করে, বিশেষত যেহেতু আপনি কিছু পুরানো ব্রাউজারগুলিও লক্ষ্যবস্তু করেছেন, আমি আপনার জন্য একটি স্নিপেট তৈরি করেছি যা আপনি এটি চালাতে পারেন এবং ফলাফলটি পরীক্ষা করতে পারেন:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

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

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 

Answer 27

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

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

Answer 28

সবচেয়ে ভাল সমাধান এটি

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

Answer 29

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

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

এবং আপনি বিভিন্ন হতে পারে font-size।

Answer 30

কোনও পাঠ্য / শিরোনামের পরে থাকা এবং উভয়ই একটি ডিভের মধ্যে থাকা কোনও চিত্র সারিবদ্ধ করতে চান?

দেখতে JSfiddle বা চালান কোড স্নিপেট।

আপনার সমস্ত উপাদানগুলিতে (ডিভি, আইএমজি, শিরোনাম, ইত্যাদি) কেবল একটি আইডি বা শ্রেণি রয়েছে তা নিশ্চিত হন।

আমার জন্য এই সমাধানটি সমস্ত ব্রাউজারগুলিতে কাজ করে (মোবাইল ডিভাইসের জন্য আপনাকে অবশ্যই আপনার কোডটি: মিডিয়ার সাথে মানিয়ে নিতে হবে)।

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}

<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>