2 টি বিভিন্ন আকারের পাঠ্যকে উল্লম্বভাবে কীভাবে সারিবদ্ধ করা যায়?

Question

আমি কোনও ব্লকের মাঝখানে পাঠ্যটি উল্লম্বভাবে সারিবদ্ধ করতে জানি, আপনি ব্লকের একই উচ্চতায় লাইন-উচ্চতা নির্ধারণ করেছেন।

তবে, মাঝখানে যদি আমার একটি বাক্য থাকে তবে তা হয় 2em। যদি পুরো বাক্যে একটি লাইন-উচ্চতা থাকে যা ধারণকৃত ব্লকের মতো হয় তবে বৃহত্তর পাঠ্যটি উল্লম্বভাবে প্রান্তিক হয় তবে ছোট পাঠ্যটি বৃহত্তর পাঠ্যের মতো একই বেসলাইনে থাকে।

উভয় আকারের পাঠ্যটি উল্লম্বভাবে সাজানো আছে কীভাবে আমি এটি সেট করতে পারি, সুতরাং বৃহত্তর পাঠ্যটি ছোট পাঠ্যের চেয়ে কম বেসলাইনে থাকবে?

Answer 1

vertical-align:middle;ইনলাইন পাত্রে চেষ্টা করবেন ?

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

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

Comments

এবং আমি সবসময় ভেবেছিলাম কেবল vertical-align: middleতার জন্য table-cell!

— রবিন ভ্যান বালেন 21

আমি দ্বিতীয় স্প্যানটি সঠিকভাবে ভাসতে চাইলে এটি ব্যর্থ বলে মনে হচ্ছে। তারপরে এটি শীর্ষে সারিবদ্ধ: jsfiddle কোনও ধারণা কীভাবে এটি ভাসা দিয়ে কাজ করবেন?

— ফিলিপ

প্যারেন্ট ডিভের উচ্চতা এবং লাইন-উচ্চতা শৈলীর সেট করা কি প্রয়োজনীয়?

— lexeek

Answer 2

আপনি যে কার্যকারিতাটি দেখছেন তা সঠিক কারণ "উল্লম্ব-সারিবদ্ধ" এর জন্য ডিফল্টটি বেসলাইন। এটি আপনি চান যে প্রদর্শিত হবে vertical-align:top। অন্যান্য বিকল্প আছে। ডাব্লু 3 স্কুলগুলিতে এখানে দেখুন ।

ডাব্লু 3 স্কুলগুলি সম্পাদন করুন এবং তাদের কাজটি পরিষ্কার করেনি এবং তথ্যের উত্সাহী (সেরাতম) উত্স হিসাবে উপস্থিত হতে পারে appear আমি এখন সিটপয়েন্ট ব্যবহার করি । তাদের রেফারেন্স বিভাগগুলি অ্যাক্সেস করতে সিটপয়েন্টের প্রথম পৃষ্ঠার নীচে স্ক্রোল করুন।

Comments

আমি তখন থেকে শিখেছি যে ডাব্লু 3 স্কুলগুলি কোনও ভাল রেফারেন্স সাইট নয়। আরও তথ্যের জন্য w3fools.com দেখুন ।

— DwB

ডাব্লু 3 এস জাঙ্কের টুকরো এই সিদ্ধান্তে আসার জন্য +1 এটিকে জানুন।

— এএফএক্সএক্স

Answer 3

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

 span{
     vertical-align: bottom;
     line-height: 50px;
}

Answer 4

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

Answer 5

পিতামাতার পুনরায় প্রয়োগ করতে আপনি শতাংশ মাপ ব্যবহার করতে পারেন line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Answer 6

সহজ উপায় - ফ্লেক্স ব্যবহার করুন:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

Answer 7

একটি বিকল্পটি এখানে একটি টেবিল ব্যবহার করা হয় যেখানে বিভিন্ন আকারের পাঠ্যগুলি তাদের নিজস্ব কোষে থাকে এবং প্রতিটি ঘরের মধ্যবর্তী প্রান্তিককরণ ব্যবহার করে।

এটি সুন্দর নয় এবং সব অনুষ্ঠানের জন্য কাজ করে না তবে এটি সহজ এবং কোনও পাঠ্য আকারের সাথে কাজ করে।

Comments

আমি আবার বিন্যাসের জন্য টেবিল ব্যবহার করার আগে পরাজয়কে মেনে নেব।

— জেডি আইজ্যাকস

Answer 8

এইটা কাজ করে

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>