শতাংশ হিসাবে লাইন-উচ্চতা কাজ করছে না

Question 1

আমার লাইন-উচ্চতা নিয়ে একটি সমস্যা রয়েছে যা আমি প্রায় আমার মাথা পেতে পারি না।

নিম্নলিখিত কোডটি একটি ডিভের মধ্যে একটি চিত্রকে কেন্দ্র করবে:

সিএসএস

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

এইচটিএমএল

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

তবে, আমি যদি রেখার উচ্চতাটি 100% এ পরিবর্তন করি তবে রেখার উচ্চতা কার্যকর হয় না (বা কমপক্ষে ডিভের 100% হয়ে যায় না)।

উদাহরণস্বরূপ jsfiddle

কেউ কি জানে যে আমি কী ভুল করছি?

Question 2

line-height: 100%মানে সেই উপাদানটির জন্য হরফের 100% নয়, এর উচ্চতার 100% নয়। বস্তুত, লাইনের উচ্চতা সবসময় ফন্টের আকার, না উচ্চতা আপেক্ষিক, যদি না এর মান পরম দৈর্ঘ্যের একটি ইউনিট (ব্যবহার px, ptইত্যাদি)।

Question 3

আমি জানি এই প্রশ্নটি পুরানো, তবে আমি খুঁজে পেলাম যে আমার জন্য সঠিক কাজটি।

আমি এই সিএসএসটি ডিভের সাথে যুক্ত করতে চাই যা কেন্দ্র করতে চাই:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

এটি প্রতিবার কাজ করে এবং এটি পরিষ্কার।

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

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

সম্পূর্ণ ব্যাখ্যা: div:beforeডিভের অভ্যন্তরে কোনও উপাদান যুক্ত করবে তবে এর কোনও সন্তানের আগে। ব্যবহার করার সময় :beforeবা :afterআমাদের অবশ্যই একটি content:ঘোষণা ব্যবহার করতে হবে অন্যথায় কিছুই হবে না, তবে আমাদের উদ্দেশ্যে, সামগ্রীটি খালি থাকতে পারে। তারপরে আমরা উপাদানটিকে তার পিতামাতার মতো লম্বা হতে বলি, যতক্ষণ না তার পিতামাতার উচ্চতা সংজ্ঞায়িত হয় এবং এই উপাদানটি অন্তত ইনলাইন-ব্লক থাকে। ভিন্নভাবে কাজ করে তার vertical-alignবিপরীতে পিতামাতার সাথে সম্পর্কিত আত্মের উল্লম্ব অবস্থানটি সংজ্ঞায়িত করে text-align।

@mixinঘোষণা Sass ব্যবহারকারীদের জন্য এবং এটি এই মত ব্যবহার করা হবে:

div {
    @include vertical-align(middle)
}

Question 4

আপনি যখন শতাংশটি লাইন-উচ্চতা হিসাবে ব্যবহার করেন এটি ডিভ কনটেইনার ভিত্তিতে নয়, বরং এটি ফন্টের আকারের উপর ভিত্তি করে।

Question 5

লাইন-উচ্চতা: 100% হ'ল উল্লম্বভাবে কেন্দ্রের উপাদানগুলির পক্ষে সহজ উপায়, যদি এটি ধারকটির সাথে সম্পর্কিত গণনা করা হয় তবে এটি খুব সহজ হবে, সুতরাং এটি কার্যকর হয় না।

সুতরাং পরিবর্তে, এটি লাইন-উচ্চতা বলার আরও একটি উপায়: 1 মিম (ডান?)

কোনও উপাদানকে উল্লম্বভাবে কেন্দ্র করার আরেকটি উপায় হ'ল:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Question 6

এটি সুন্দর নাও হতে পারে, তবে এটি কাজ করছে এবং এর শব্দার্থক;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

প্রদর্শন: টেবিল-ঘর একটি উপাদানটিকে উল্লম্বভাবে সারিবদ্ধ করার জন্য অনন্য টেবিলের প্রশস্ততা দেয় (কমপক্ষে আমি তার অনন্য বলে মনে করি)

Question 7

এটি একটি অতি দেরী উত্তর, তবে আধুনিক ব্রাউজারগুলিতে, ধরে নেওয়া হয় যে প্যারেন্ট উপাদানটিও পর্দার উচ্চতার 100%, আপনি vhভিউপোর্ট ইউনিটটি ব্যবহার করতে পারেন । ছোট ছোট

line-height: 100vh;

ব্রাউজার সমর্থন

Question 8

এই সমাধানটি আইই 9 এবং এর উপরে কাজ করে। প্রথমে আমরা সন্তানের শীর্ষ অবস্থানটি 50% (পিতামাতার মাঝামাঝি) এ সেট করি। তারপরে ব্যবহার করছেনtranslate নিয়ম , শিশুটিকে তার আসল উচ্চতার অর্ধেক বাড়িয়ে নিন। মূল সুবিধাটি হ'ল আমাদের বাচ্চার উচ্চতা নির্ধারণ করার দরকার নেই, এটি গতিশীলভাবে ব্রাউজার দ্বারা গণনা করা হয়। জেএসফিডাল

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Question 9

আরও আধুনিক পদ্ধতির জন্য এটির জন্য ফ্লেক্সবক্স ব্যবহার করা, এটি সহজ এবং পরিষ্কার। যাইহোক, ফ্লেক্সবক্স কি inline-block, floatবা থেকে সম্পূর্ণ ভিন্ন দৃষ্টান্তposition যা ছিল ।

আপনার ভিতরে আইটেমগুলি সারিবদ্ধ করার জন্য .parent:

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

এটি সম্পর্কে এটি। শিশুদেরflexপিতামাতার স্বয়ংক্রিয়ভাবে ফ্লেক্স শিশু আইটেমগুলিতে রূপান্তরিত হয়।

আপনার ফ্লেক্সবক্স সম্পর্কে আরও পড়তে হবে, শুরু করার একটি ভাল জায়গা হ'ল এই চিট শীট: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question 10

আপনি সেই উপাদানটির উচ্চতার ভিত্তিতে লাইন-উচ্চতা সেট করতে পারেন । উপাদানটির উচ্চতা 200px এর অর্থ যদি পাঠ্যটি কেন্দ্র করতে আপনাকে লাইন উচ্চতা 200px এ সেট করতে হবে।

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

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

Question 11

এটি সেই আধুনিক সমাধান যা আপনাকে ধারক ডিভ বা বাহ্যিক ডিভিতে নিম্নলিখিত সিএসএস স্থাপন করতে হবে।

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center; 
}

আপনি উলম্বভাবে কেন্দ্রিক তৈরি করতে চান এমন উপাদানটিতে আরও নিম্নলিখিত নিম্নলিখিত সমাধান প্রয়োগ করা যেতে পারে। দ্রষ্টব্য যে বাইরের বা ধারক ডিভ হওয়া উচিত

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

দ্রষ্টব্য যে বাইরের বা ধারক ডিভ অবস্থানটি আপেক্ষিক হওয়া উচিত।