css - উল্লম্বভাবে একটি ইমেজ পাশে টেক্সট সারিবদ্ধ?




vertical-alignment (14)

অন্য একটি জিনিস যা আপনি করতে পারেন <div> মধ্যে চিত্রগুলির আকারের আকারের পাঠ্য- line-height সেট করুন। তারপরে ছবিগুলি vertical-align: middle;

যে গুরুত্ব সহকারে সহজতম উপায়।

কেন vertical-align: middle হবে না vertical-align: middle কাজ? এবং এখনো, vertical-align: top কাজ করে।

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

আপনি display সম্পত্তি ব্যবহার করে inline element হিসাবে ছবি সেট করতে পারেন

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>


আপনি সম্ভবত এই চান:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

অন্যরা যেমন প্রস্তাব করেছেন, চিত্রটিতে vertical-align চেষ্টা vertical-align :

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

সিএসএস বিরক্তিকর নয়। আপনি শুধু ডকুমেন্টেশন পড়া না । ; p


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

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

FF3 পরীক্ষিত।

এখন আপনি এই ধরনের বিন্যাসের জন্য flexbox ব্যবহার করতে পারেন।

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


উল্লম্ব-সারিবদ্ধের জন্য এখানে কিছু সহজ কৌশল রয়েছে:

এক লাইন উল্লম্ব-সারিবদ্ধ: মধ্যম

এটি এক সহজ: পাঠ্য উপাদানটির লাইন-উচ্চতা ধারকের সমান সেট করুন

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

একাধিক লাইন উল্লম্ব-সারিবদ্ধ: নীচে

একেবারে তার ধারক আপেক্ষিক একটি ভিতরের div অবস্থান

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

একাধিক লাইন উল্লম্ব-সারিবদ্ধ: মাঝারি

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

আপনি IE <= 7 এর পূর্ব সংস্করণগুলির সমর্থন করতে হবে

এই বোর্ড জুড়ে সঠিকভাবে কাজ করার জন্য, আপনি একটু সিএসএস হ্যাক করতে হবে। সৌভাগ্যক্রমে, আমাদের পক্ষে কাজ করে যে একটি বাগ আছে। top:50% সেটিং top:50% ধারক এবং top:-50% অভ্যন্তরীণ DIV এ, আপনি একই ফলাফল অর্জন করতে পারেন। আমরা অন্য বৈশিষ্ট্যটি ব্যবহার করে একত্রিত করতে পারি IE সমর্থন করে না: উন্নত সিএসএস নির্বাচকরা।

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

পরিবর্তনশীল ধারক উচ্চতা উল্লম্ব-সারিবদ্ধ: মাঝারি

এই সমাধানটি অন্য সমাধানগুলির তুলনায় সামান্য আরো আধুনিক ব্রাউজারের প্রয়োজন, এটি transform: translateY ব্যবহার করে transform: translateY সম্পত্তি। ( http://caniuse.com/#feat=transforms2d )

একটি উপাদানতে সিএসএসের নিম্নলিখিত 3 টি লাইন প্রয়োগ করলে এটি মূল অংশটির ঊর্ধ্বে থাকা সত্ত্বেও এটি তার পিতামাতার মধ্যে উল্লম্বভাবে কেন্দ্র করবে:

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

এই উত্তরগুলির মধ্যে কোনও margin সাথে সমাধানটি দেখেননি, তাই এই সমস্যার সমাধান আমার এখানে।

আপনি যদি আপনার ইমেজ প্রস্থ জানেন তাহলে এই সমাধান শুধুমাত্র কাজ করে।

এইচটিএমএল

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

সিএসএস

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

এই স্প্যান বৈশিষ্ট্য লিখুন

span{
    display:inline-block;
    vertical-align:middle;
}

display:inline-block; ব্যবহার করুন display:inline-block; যখন আপনি vertical-align সম্পত্তি ব্যবহার করেন। এটি অ্যাসোসিয়েটেড বৈশিষ্ট্য


একটি ফ্লেক্স ধারক মধ্যে আপনার div পরিবর্তন করুন:

div {display:flex;}


এখন সমস্ত বিষয়বস্তু জন্য alignments কেন্দ্রে দুটি পদ্ধতি আছে:

পদ্ধতি 1:

div {align-items:center;}

DEMO

পদ্ধতি 2:

div * {margin-top:auto; margin-bottom:auto;}

DEMO

img এবং বিভিন্ন ফন্টের আকারের মানগুলিতে বিভিন্ন প্রস্থ এবং উচ্চতা মান চেষ্টা করুন এবং আপনি দেখতে পাবেন যে তারা সর্বদা কন্টেইনারের মাঝখানে থাকে।


কাজ করার জন্য আপনাকে DIV এর line-height সেট করতে হবে


গৃহীত উত্তরটিতে ব্যবহৃত কৌশলটি শুধুমাত্র একক-রেখাযুক্ত পাঠ্য ( demo ) জন্য কাজ করে, তবে মাল্টি লাইন পাঠ্য ( demo ) নয় - যেমন উল্লেখ আছে।

যদি কারো কাছে একটি ছবিতে উল্লম্বভাবে বহু-রেখাযুক্ত পাঠ্য কেন্দ্রের প্রয়োজন হয় তবে এখানে কয়েকটি উপায় রয়েছে ( এই সিএসএস-ট্রিক্স প্রবন্ধ দ্বারা অনুপ্রাণিত পদ্ধতি 1 এবং ২)

পদ্ধতি # 1: CSS টেবিল ( FIDDLE ) (IE8 + ( caniuse ))

সিএসএস:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

পদ্ধতি # 2: কন্টেইনারে ছদ্ম উপাদান ( FIDDLE ) (IE8 +)

সিএসএস:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

পদ্ধতি # 3: ফ্লেক্সবক্স ( FIDDLE ) ( caniuse )

সিএসএস (উপরে উল্লাসধ্বনি বিক্রেতাদের উপসর্গ রয়েছে):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

মাল্টিলাইন সমাধান:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

সব ব্রোকার এবং ie9 + কাজ করে


মূলত, আপনি CSS3 এ পেতে হবে।

-moz-box-align: center;
-webkit-box-align: center;

line-height:30px ব্যবহার করুন line-height:30px স্প্যানের জন্য যাতে পাঠ্যটি চিত্রের সাথে সমান হয়:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

background:url(../images/red_bullet.jpg) left 3px no-repeat;

আমি সাধারণত top জায়গায় 3px ব্যবহার করুন। যে মান বৃদ্ধি / হ্রাস করে, ইমেজ প্রয়োজনীয় উচ্চতা পরিবর্তন করা যেতে পারে।







vertical-alignment