css - কিভাবে একটি div ভিতরে একটি ছবি উল্লম্বভাবে সারিবদ্ধ?




image vertical-alignment (20)

প্রশ্ন

কিভাবে আপনি একটি ধারণকারী div ভিতরে একটি ইমেজ সারিবদ্ধ করতে পারেন?

উদাহরণ

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

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

.frame এর উচ্চতা স্থির এবং চিত্রের উচ্চতা অজানা। আমি .frame নতুন উপাদান যোগ করতে পারেন যদি এটি শুধুমাত্র সমাধান। আমি IE7, Webkit, Gecko এ এটি করার চেষ্টা করছি।

here jsfiddle দেখুন

.frame {
    height: 25px;      /* equals max 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>


টেবিল ও টেবিল সেল ব্যবহার করে সমাধান

কখনও কখনও এটি টেবিল / টেবিল-সেল হিসাবে প্রদর্শন করে সমাধান করা উচিত। উদাহরণস্বরূপ একটি দ্রুত শিরোনাম পর্দা। এটি W3 দ্বারা একটি প্রস্তাবিত উপায়। আমি আপনাকে 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> 

ব্যক্তিগতভাবে আমি আসলে এই উদ্দেশ্যে ব্যবহারের সহায়ক সম্পর্কে অসম্মতি জানাই


3 লাইন সমাধান:

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

এই কিছু প্রযোজ্য।

here থেকে।


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

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

}


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

ডেমো

http://jsfiddle.net/DZ8vW/1

সিএসএস

.frame {
    height: 25px;      /* equals max 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";
})

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


আমার সমাধান: 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;
}

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

jsfiddle

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

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

img {
  width: 100%;
}

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

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

.frame {
    height: 25px;      /* equals max 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>

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

এর সমাধান :before IE এর :before এবং expression() : http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max 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. সুতরাং, height: 100% সহ একটি inline-block height: 100% স্থায়ী উচ্চতার সাথে একটি ব্লকের height: 100% এটিতে উল্লম্বভাবে এটির মধ্যে অন্য inline-block উপাদানটি সন্নিবেশ করবে ( <img/> আপনার ক্ষেত্রে)।

একটি কনটেইনারের ভিতরে একটি চিত্র কেনার জন্য (এটি একটি লোগো হতে পারে) এর মতো কিছু পাঠ্য ছাড়া:

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

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

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

img {
//height: auto;
  vertical-align: middle;
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>


একটি বিশুদ্ধ সিএসএস সমাধান:

http://jsfiddle.net/3MVPM/

সিএসএস:

.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;  
}

মূল উপাদান

// 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

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

.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/-128.png" />
</div>


এটি দরকারী হতে পারে:

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

রেফারেন্স: http://www.student.oulu.fi/~laurirai/www/css/middle/


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

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

সম্পাদনা করুন: এখন এটি অপেরাতে কেন্দ্রীভূত নয় ...


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

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: 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


সেরা সমাধান যে

.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;
}

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

.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 img {} যাতে শুধুমাত্র একটি .frame সাথে ডিভি দ্বারা আবৃত চিত্র লক্ষ্য করা হবে।


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/-128.png" />
  </div>
</div> 


Flexbox সঙ্গে একটি সুপার সহজ সমাধান আছে !

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

ব্যাকগ্রাউন্ড ইমেজ সমাধান আমি সবকিছুর সাথে ছবির উপাদানটি সরিয়ে দিয়েছি এবং .frame ব্যাকগ্রাউন্ড হিসাবে .frame সাথে সেট করেছি

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

এটি অন্তত IE8, FF6 এবং Chrome13 এ জরিমানা করে

আমি চেক করেছি, এই সমাধানটি 25px উচ্চতার উচ্চতর চিত্রগুলি সঙ্কুচিত করতে কাজ করবে না। background-size একটি সম্পত্তি রয়েছে যা উপাদানটির আকার সেট করে, তবে এটি এমন CSS3 যা আই 7 প্রয়োজনের সাথে দ্বন্দ্ব করবে।

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


এটা কেমন?

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

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





vertical-alignment