ইনলাইন / ইনলাইন-ব্লক উপাদানের CSS উল্লম্ব সারিবদ্ধকরণ

Question

আমি বেশ কয়েকটি inlineএবং inline-blockউপাদানগুলিকে একটিতে উল্লম্বভাবে সারিবদ্ধ করার চেষ্টা করছি div। spanএই উদাহরণটিতে কীভাবে চাপ দেওয়া হচ্ছে? আমি উভয় চেষ্টা করেছি vertical-align:middle;এবং vertical-align:top;, কিন্তু কিছুই পরিবর্তন।

এইচটিএমএল:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

সিএসএস:

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

ফলাফলটি জেনে নিন:

বেহালা

Comments

মনে রাখবেন যে <a>উপাদানগুলির মধ্যে কিছু পাঠ্য থাকলে এই লিঙ্কটি

— এস। সরপুশন

Answer 1

vertical-alignসারিবদ্ধ হওয়ার উপাদানগুলিতে প্রযোজ্য, তাদের পিতামাতার উপাদান নয়। ডিভের বাচ্চাদের উল্লম্বভাবে সারিবদ্ধ করতে, পরিবর্তে এটি করুন:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

দেখুন: http://jsfiddle.net/dfmx123/TFPx8/1186/

দ্রষ্টব্য : vertical-alignবর্তমান পাঠ্য লাইনের সাথে সম্পর্কিত, পিতামাতার পুরো উচ্চতা নয় div। আপনি যদি পিতামাতাকে divলম্বা হতে চান এবং এখনও উপাদানগুলি উল্লম্বভাবে কেন্দ্রীভূত করেন তবে divএর line-heightসম্পত্তিটির পরিবর্তে তার সম্পত্তি সেট করুন height। উদাহরণস্বরূপ উপরে jsfiddle লিঙ্ক অনুসরণ করুন ।

Comments

যদি আপনি বাইরের জন্য কোনও উচ্চতা নির্দিষ্ট করে থাকেন তবে এটি কাজ করা বন্ধ করে দেয় div।

— আবরণিল দাস

@ আব্রানিলডাস vertical-alignবর্তমান পাঠ্য লাইনের সাথে সম্পর্কিত, মূল উপাদানটি নয়। এই কাজটি আপনি চান হিসাবে তৈরি করতে ডিভ এর line-heightপরিবর্তে সেট করুন height।

— দিয়েগো

Answer 2

দিন vertical-align:top;মধ্যে a& span। এটার মত:

a, span{
 vertical-align:top;
}

এই http://jsfiddle.net/TFPx8/10/ দেখুন

Answer 3

কেবল বামে ভাসমান উভয় উপাদান একই ফলাফল অর্জন করে।

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}

Comments

এগুলি বাম দিকে ভাসানোর সমস্যাটি হ'ল ব্রাউজারটি খুব ছোট হয়ে গেলে তারা পরের লাইনে মুড়ে দেবে। কখনও কখনও আপনার ব্রাউজারের সীমা ছাড়িয়েও ইনলাইন থাকতে আইটেমগুলির প্রয়োজন হয় এবং এইভাবে, inline-blockএটিই একমাত্র সমাধান।

— জ্যাক উইলসন

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

— ক্রিসপেন স্মিথ

Answer 4

কোনও inline-blockআইটেমের অবস্থান সূক্ষ্ম সুর করার জন্য উপরে এবং বাম ব্যবহার করুন:

  position: relative;
  top: 5px;
  left: 5px;

ধন্যবাদ সিএসএস-ট্রিকস !

Comments

translateসম্ভব।

— user4642212