চিত্রটি কেন্দ্রের মাঝে এবং মাঝখানে ডিভের মধ্যে সারিবদ্ধ করুন

302

আমি ডিভ অনুসরণ করছি

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

ইমেজটি কীভাবে সারিবদ্ধ করা যায় যাতে ডিভের মাঝখানে এবং কেন্দ্রে অবস্থিত হয়?

html css

— Dro1n2
সূত্র

12

সদৃশ 2 মিনিট আগে জিজ্ঞাসা করা হয়েছিল: সিএসএস: চিত্র মাঝখানে

— পেক্কা

1

এখানে একই বিষয়: stackoverflow.com/questions/18516317/...

— হাশেম Qolami

একটি উত্তর সঠিক হিসাবে বিবেচনা করুন।

— ম্যাকসনক

উভয়ভাবে অনুভূমিকভাবে এবং অনুভূমিকভাবে কেন্দ্রে / মাঝখানে চিত্র কীভাবে রাখবেন তার

— gbjbaanb

406

body {
  margin: 0;
}

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

<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

স্নিপেট প্রসারিত করুন

JSFiddle

— গুরপ্রীত সিং
সূত্র

4

display: block;আমার ক্ষতি ছিল। TnX

— উজ্জ্বল সিং

2

অনুসরণ কাজ করে না। আমি কি ভুল করছি। <html> <হেড> <স্টাইল> # ওভার আইএমজি {প্রদর্শন: ব্লক; মার্জিন-বাম: অটো; মার্জিন-ডান: অটো; } </style> </head> <body> <div id = "ওভার" শৈলী = "অবস্থান: পরম; প্রস্থ: 100%; উচ্চতা: 100%"> <img src = " img8a.flixcart.com/image/ ট্যাবলেট / এফ / কে / টি / ... "> </div> </body> </html>

— nizam.sp

1

আমরা যদি display: blockডিফল্টটি ব্যবহার না করি তবে w3schools.com/cssref/pr_class_display.aspdisplay: inline অনুসারে । কেন আমাদের ব্লক ব্যবহার করা দরকার? আমি আমার পক্ষে কাজ করেছি, তবে নিশ্চিত নয় কেন ব্লকটি ইম্জি এবং ইনলাইনটি কেন্দ্র করবে।

— user3731622

কারণ ইনলাইনটি লাইনে সরবে না, এটি সত্যই লাইনে। সুতরাং মার্জিন অটো অকার্যকর।

— নেটালেক্স

12

এটি উল্লম্বভাবে সারিবদ্ধ হয় না

— আলপাদেভ 11:37

170

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

— জন কে।
সূত্র

6

শীর্ষ উত্তর, খুব সহায়ক!

— ইলিয়ান আন্দ্রেভ

1

খুব সংক্ষিপ্ত এবং সহজ সমাধান, তবে এটি কেবলমাত্র একটি স্থির, অ-শতাংশের প্রস্থ এবং উচ্চতার সাথে কাজ করছে বলে মনে হচ্ছে। এটি ভাসমানগুলির সাথে কাজ করে যদিও এর জন্য এটি +1 করে। - jsfiddle.net/2s2nY/2

— magnetronnie

1

তবে এটি কেবল উল্লম্ব-সারিবদ্ধ কাজ করছে তবে অনুভূমিকটি ঠিক নয়?

— ভি-শাই

1

চিত্রের প্রস্থ ডিভের প্রস্থের চেয়ে বড় হলে এটি কাজ করবে না।

— দাভুজ 26'15

5

যদি আমরা প্রদর্শনটি সরিয়ে ফেলি: টেবিল-সেল; এটি নিখুঁতভাবে কাজ করে।

— অহসনালী সুথার

103

এটি ফ্লেক্সবক্স লেআউট ব্যবহার করেও করা যেতে পারে:

স্ট্যাটিক সাইজ

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}

<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

স্নিপেট প্রসারিত করুন

ডায়নামিক সাইজ

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}

<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

স্নিপেট প্রসারিত করুন

আমি এই নিবন্ধে উদাহরণটি পেয়েছি , যা কীভাবে লেআউটটি ব্যবহার করবেন তা ব্যাখ্যা করার একটি দুর্দান্ত কাজ করে।

— aerdman
সূত্র

স্ট্যাটিক সাইজে, সন্তানের জন্য প্রস্থ এবং উচ্চতার কোনও প্রয়োজন নেই (কমপক্ষে আমার ফায়ারফক্সের সংস্করণে)।

— রডরিগো

91

আমার কাছে মনে হচ্ছে যে আপনিও চেয়েছিলেন যে চিত্রটি উল্লম্বভাবে ধারকটির মধ্যে কেন্দ্রীভূত হোক। (আমি সরবরাহ করে এমন কোনও উত্তর দেখিনি)

ওয়ার্কিং ফিডল:

খাঁটি সিএসএস সমাধান
দস্তাবেজের প্রবাহ ভঙ্গ করবেন না (কোনও ফ্লোট বা পরম অবস্থান নয়)
ক্রস ব্রাউজার সামঞ্জস্য (এমনকি আই 6)
সম্পূর্ণরূপে প্রতিক্রিয়াশীল।

এইচটিএমএল

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

সিএসএস

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

দ্রষ্টব্য: এই সমাধানটি কোনও উপাদানগুলির মধ্যে যে কোনও উপাদান সারিবদ্ধ করার জন্য ভাল। আই 7 এর জন্য, .Centeredব্লক উপাদানগুলিতে ক্লাস প্রয়োগ করার সময় , আপনাকে inline-blockকাজটি পেতে আরেকটি কৌশল ব্যবহার করতে হবে । (কারণ আইআই 6 / আইআই block ব্লক উপাদানগুলিতে ইনলাইন-ব্লক দিয়ে ভাল খেলতে পারে না)

— avrahamcool
সূত্র

অতিরিক্ত থাকার পরিবর্তে span, আপনি সিউডো-এলিমেন্টটি ব্যবহার করতে পারেন :before: jsfiddle.net/xaliber/cj6zhtp0

— মৃত্যুবরণ

@ ডিথলক এটি সুপরিচিত। তবে আমি পুরানো IE ব্রাউজারগুলি লক্ষ্য করছিলাম (যারা ছদ্ম উপাদানগুলিকে সমর্থন করেনি)।

— অব্রাহামকুল

1

এটি নয়, তবে এইচটিএমএল কেবল কাঠামোর জন্য ব্যবহার করা উচিত, উপস্থাপনা নয়। সেই কাজটি সিএসএসের জন্য রেখে গেছে, সুতরাং সিউডো-এলিমেন্ট।

— ডেথলক

1

"ডকুমেন্ট প্রবাহকে ভঙ্গ করবেন না (কোনও ভাসমান বা নিখুঁত অবস্থান নেই)" এর অর্থ কী? কি #over { position:absolute; width:100%; height:100%;?

— রডরিগো

1

@ রডরিগো প্রকৃতপক্ষে, আপনার যদি পুরানো ব্রাউজারগুলিকে লক্ষ্য করার প্রয়োজন না হয় তবে এই ফ্লেক্সবক্সটি প্রস্তাবিত পদ্ধতি।

— অভ্রহামকুল

62

img.centered {
   display: block;
   margin: auto auto;
}

— নিতিন
সূত্র

1

এটি এই উত্তরের

— মিলে যায়

32

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

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

— তানভীর আহমাদ দার
সূত্র

এই আমার জন্য কাজ করে। চিত্র পিইউজি / এসসিএসএসে গভীরভাবে বাসা বেঁধেছে। ধন্যবাদ।

— মোগেনস ট্র্যাশারডিকে

29

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

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

— ধীর
সূত্র

এটি সঠিক উত্তর, এটি উভয়ভাবে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্র করে।

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

এখন পর্যন্ত সেরা উত্তর।

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

13

এখানে উপস্থাপিত অন্যান্য সমাধানের সাথে আমার এখনও কিছু সমস্যা ছিল। অবশেষে এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

CSS3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

আপনি এই পৃষ্ঠাতে এই পদ্ধতির সম্পর্কে আরও পড়তে পারেন ।

— pawel7318
সূত্র

আমাকে প্যারেন্ট সিএসএস যোগ করতে হয়েছিল তবে আপনার কোডটি পুরোপুরি কার্যকর হয়েছিল! অবস্থান: আপেক্ষিক; প্রস্থ: 100%; ভাসা: বাম; যথোপযুক্ত সৃষ্টিকর্তাযথোপযুক্ত সৃষ্টিকর্তা; সর্বনিম্ন উচ্চতা: 189px;

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

10

মূলত, ডানে এবং বাম মার্জিনকে অটোতে সেট করার ফলে চিত্রটি কেন্দ্র বিন্যস্ত হয়।

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

— Garconis
সূত্র

8

এটি একটি সহজ পদ্ধতির হবে

#over > img{
    display: block;
    margin:0 auto; 
}

— সুজয় শ্রীধর
সূত্র

7

দাওক্সের উত্তরটি কাজ করে তবে আমি মনে করি যে আমরা যদি ইনলাইন সিএসএসটি মুছে ফেলি তবে এটি আরও পরিষ্কার হবে।

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="example" id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

স্নিপেট প্রসারিত করুন

— LizardKG
সূত্র

6

সেটিং চিত্র থেকে প্রদর্শন: ইনলাইন-ব্লক যখন উচ্চতর সেট থাকার DIV আছে করার টেক্সট প্রান্তিককরণ: কেন্দ্র খুব কাজ কি করতে হবে

সম্পাদনা: যারা দর্শকদের সাথে খেলছেন তাদের কাছে : ইনলাইন-ব্লক >>> ভুলে যাবেন না যেমন দুটি ডিভের মত

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

তাদের মধ্যে সত্যিই কোনও ফাঁকা স্থান নেই (যেমন এখানে দেখানো হয়েছে)।

এগুলির মধ্যে এগুলি (ইনলাইন ব্লক সহজাত) ফাঁকগুলি এড়াতে কেবল বেসিক। এই মুহূর্তে এই দুটি ফাঁকগুলি দেখা যাচ্ছে যে আমি এখনই লিখছি! :-) তাই .. আশা করি এটি আপনার কারও পক্ষে সহায়তা করবে।

— Sasha
সূত্র

6

সহজ। 2018. ফ্লেক্সবক্স। ব্রাউজার সমর্থন পরীক্ষা করতে - আমি কি

সর্বনিম্ন সমাধান ব্যবহার করতে পারি :

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

আরও প্রশস্ত ব্রাউজার সমর্থন পেতে:

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

— Nadav
সূত্র

5

আমি অনেকগুলি পদ্ধতির চেষ্টা করেছি তবে কেবলমাত্র এটিই একটি ধারক ডিভের ভিতরে একাধিক ইনলাইন উপাদানগুলির জন্য কাজ করে। মাঝখানে ডিভের মধ্যে প্রতিটি কিছুর জন্য কোড এখানে।

সিএসএস

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

এইচটিএমএল

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

নমুনা কোডটি এখানে: https://jsfiddle.net/yogendrasinh/2vq0c68m/

— Yogee
সূত্র

5

সিএসএস ফাইল

.over {
    display : block;
    margin : 0px auto;

— সাবারিশ আর
সূত্র

3

এই সর্বনিম্ন কোডটি ব্যবহার করে দেখুন:

<div class="outer">
    <img src="image.png"/>
</div>

এবং সিএসএস:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

— luchopintado
সূত্র

3

ঠিক আছে, আমরা 2016 সালে আছি ... ফ্লেক্সবক্স ব্যবহার করবেন না কেন? এটিও প্রতিক্রিয়াশীল। উপভোগ করুন।

#over{
display:flex;
align-items:center;
justify-content:center;
}

<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

স্নিপেট প্রসারিত করুন

— GabMic
সূত্র

1

সিএস 3 ভালোবাসি! ধন্যবাদ. তবে এটি লক্ষ্য করা ভাল যে এটি কেবল আধুনিক ব্রাউজারগুলিতে (আইই বাদে) কাজ করবে। অন্যান্য সমস্ত ব্রাউজারের কোনও প্রভাব থাকবে না।

— নীল

2

অনেক উত্তর ব্যবহারের পরামর্শ দেয় margin:0 autoতবে এটি তখনই কাজ করে যখন আপনি কেন্দ্রিক তৈরির চেষ্টা করছেন উপাদানটি বাম বা ডানদিকে ভাসছে না, এটি floatCSS বৈশিষ্ট্যটি সেট করা নেই। এইটি করার displayজন্য table-cellএবং তারপরে বাম এবং ডান থেকে ডানদিকে মার্জিনটি প্রয়োগ করুন যাতে আপনার স্টাইলটি দেখতে ভাল লাগবেstyle="display:table-cell;margin:0 auto;"

— বিকাশ দেদে
সূত্র

2

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

— betty.88
সূত্র

2

এইচটিএমএল:

<div id="over">
    <img src="img.png">
</div>

সিএসএস:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

— Lahori
সূত্র

আপনি যদি কিছু মন্তব্য যুক্ত করেন এবং কেবল কোড টস না করে থাকেন তবে এটি সেরা।

— প্রকাশ কুমার

2

অনুভূমিকভাবে কেন্দ্রের জন্য কেবল লিখুন

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

অন্য পদ্ধতি:

#over img {
    display: inline-block;
    text-align: center;
}

উল্লম্বভাবে কেন্দ্রের জন্য কেবল লিখুন:

   #over img {

           vertical-align: middle;
        }

— সানজিব দেবনাথ
সূত্র

2

এটি আমার পক্ষে কাজ করেছে:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

— Sileria
সূত্র

2

এটি আমার জন্য কৌশলটি করেছে।

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'দ্রষ্টব্য: এক্ষেত্রে' ব্র্যান্ড আইমেজ 'তে কোনও CSS শ্রেণি সংযুক্ত করা হবে না

সিএসএস:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

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

— julian9876
সূত্র

2

এটি আপনার জন্য কাজ করেছিল যখন আপনাকে চিত্রের প্রান্তিককরণটি কেন্দ্রবিন্দু করতে হয় এবং আপনার পিতামাতাকে ডিভ-এ চিত্রটি পুরো স্ক্রিনটি কভার করে। অর্থাত্ উচ্চতা: 100% এবং প্রস্থ: 100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

— অক্ষয় বন্দে
সূত্র

1

অবস্থান ব্যবহার করুন। নিম্নলিখিত আমার জন্য কাজ করেছে ...

চিত্রের কেন্দ্রে জুমের সাহায্যে (চিত্রটি ডিভিটি পূরণ করে):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

চিত্রের কেন্দ্রে জুম ছাড়াই (চিত্রটি ডিভিটি পূরণ করে না ):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

— ThomasAFink
সূত্র

1

এর জন্য চিহ্নিত উত্তরটি চিত্রটিকে উল্লম্বভাবে সারিবদ্ধ করবে না। আধুনিক ব্রাউজারগুলির জন্য উপযুক্ত সমাধান হ'ল ফ্লেক্সবক্স। একটি ফ্লেক্স ধারক তার আইটেমগুলি অনুভূমিকভাবে এবং উল্লম্বভাবে সারিবদ্ধ করার জন্য কনফিগার করা যেতে পারে।

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

— WDuffy
সূত্র

এই সমাধানটি প্রশ্নের উত্তর দেয় এবং চিহ্নিত উত্তরের মতো নয়। সম্ভবত ডাউন-ভোটাররা তাদের সিদ্ধান্তকে কীভাবে নিম্নে নামার বিষয়ে বিস্তারিত জানাতে পারে?

— ডাব্লুডুফি

6

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

— আরবিটি

1

এটি ডাউনভোটকে ন্যায়সঙ্গত করে না। উত্তরটি প্রযুক্তিগতভাবে সঠিক এবং ভবিষ্যতের পাঠকদের সহায়তা করবে। আমি ঘরের নিয়মগুলিকে সম্মান করার জন্য উত্তর সংস্থাকে আপডেট করেছি তবে সম্ভবত মূল দলকে আরও একটি সরাসরি সমাধান প্রয়োগ করা উচিত কারণ কেবলমাত্র উত্তরগুলি সনাক্তকরণ একটি তুচ্ছ কাজ।

— ডাব্লুডুফি

0

আপনি এই সমাধানটি একবার দেখে নিতে পারেন:

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

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

— fpauer
সূত্র

0

একটি সহজ উপায় ডিভ এবং চিত্র উভয়ের জন্য পৃথক শৈলী তৈরি করা এবং তারপরে সেগুলি স্বাধীনভাবে স্থাপন করা হবে। বলুন আমি যদি আমার চিত্রের অবস্থান 50% এ সেট করতে চাই তবে আমার কাছে এমন কোড থাকবে যা নীচের মত দেখাচ্ছে ....

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}

<div id="over">
 <img src="img.png" id="img">
</div>

স্নিপেট প্রসারিত করুন

— KSJ10
সূত্র

কেবলমাত্র আমাকে বলুন যে এটি সমস্ত ধরণের ব্রাউজারের সাথে কাজ করে, যদিও এটি একটি প্রাথমিক বিষয় যা প্রতিটি ব্রাউজারকে অবশ্যই সমর্থন করা উচিত (অন্যথায় এটি ব্রাউজার বলবেন না)

— কেএসজে 10

0

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

আপনার প্রয়োজনের জন্য উচ্চতার মানটি সংশোধন করুন।

— টেরি লিন
সূত্র

0

এই কাজ করা উচিত.

টেস্টের জন্য গুরুত্বপূর্ণ: কোড স্নিপেট চালানোর জন্য বাম বোতামটি ক্লিক করুন রুন কোড স্নিপেট , তারপরে ডান লিঙ্কটি পূর্ণ পৃষ্ঠা

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}

<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>

স্নিপেট প্রসারিত করুন

— Intacto
সূত্র