কিভাবে পাঠ্য রেখায় একটি ইনলাইন-ব্লকটি উল্লম্বভাবে সারিবদ্ধ করা যায়?

Question

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

TOP
MIDDLE
BOTTOM

তারপরে পাঠ্যের লাইনটি পড়বে: "আমার পাঠ্য ([মিডল]]" (শীর্ষের এবং বটমটি লাইনের উপরে এবং নীচে)

আমার এখন পর্যন্ত যা আছে তা এখানে।

সিএসএস

.example {
  background-color: #0A0;
  display: inline-block;
  margin: 2px;
  padding: 2px;
  position: relative;
  text-align: center;
}

এইচটিএমএল

<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

Comments

সম্ভবত এটি আঁকুন এবং আপনি যা চান তার একটি চিত্র পোস্ট করুন। সম্ভবত এটি আমি, তবে আপনি কী জিজ্ঞাসা করছেন তা আমার কোনও ধারণা নেই।

— ব্রেন্ট ফ্রায়ার

Answer 1

code {
    background: black;
    color: white;
    display: inline-block;
    vertical-align: middle;
}

<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

পরীক্ষিত এবং সাফারি 5 এবং আই 6 + এ কাজ করে।

Comments

আমি আপনার সমাধানটি একই সমস্যার জন্য ব্যবহার করেছি, তবে আমি একটি সিএসএস ত্রিভুজকে কেন্দ্র করার চেষ্টা করছি। তবে এটি সম্পূর্ণ কেন্দ্রিক নয়। এটি সম্পূর্ণ কেন্দ্রীভূত করার জন্য আমি কীভাবে আপনার রেসিপিটিতে যুক্ত করতে পারি?

— কোডি বাগস্টাইন

@ ইম্রির অবস্থান: আপেক্ষিক?

— নিনো একপা্যাক

Answer 2

display: inline-block আপনার বন্ধু কি আপনার কেবল নির্মাণের তিনটি অংশই প্রয়োজন - আগে, "ব্লক", পরে - এক হওয়ার জন্য, তবে আপনি সেগুলি উল্লম্বভাবে মাঝখানে সারিবদ্ধ করতে পারেন:

কাজের উদাহরণ

(এটি যাইহোক আপনার ছবির মতো দেখায়;))

সিএসএস:

p, div {
  display: inline-block; 
  vertical-align: middle;
}
p, div {
  display: inline !ie7; /* hack for IE7 and below */
}

table {
  background: #000; 
  color: #fff; 
  font-size: 16px; 
  font-weight: bold; margin: 0 10px;
}

td {
  padding: 5px; 
  text-align: center;
}

এইচটিএমএল:

<p>some text</p> 
<div>
  <table summary="">
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  </table>
</div> 
<p>continues afterwards</p>