সিএসএস উল্লম্ব সারিবদ্ধ পাঠ্য লি

Question 1

আমি <li> ট্যাগ থেকে উত্পন্ন স্থির উচ্চতা এবং প্রস্থ সহ এক সারি সারি বাক্স প্রদর্শন করছি। এখন আমার পাঠ্যটি উল্লম্ব কেন্দ্রে সারিবদ্ধ করা দরকার। সিএসএস উল্লম্ব-সারিবদ্ধের কোনও প্রভাব নেই, সম্ভবত আমি কিছু মিস করছি ???

আমি (মার্জিন, প্যাডিং, লাইন-উচ্চতা) ব্যবহার করে কৌশলগুলি খুঁজছি না, এগুলি কার্যকর হবে না কারণ কিছু পাঠ্য দীর্ঘ এবং দুটি লাইনে বিভক্ত হবে।

দয়া করে আসল কোডটি সন্ধান করুন:

সিএসএস কোড

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

এইচটিএমএল কোড

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Question 2

সঙ্গে পিতা বা মাতা নির্ধারণ display: tableএবং উপাদান নিজেই vertical-align: middleএবং display: table-cell।

Question 3

line-heightআপনি কিভাবে উল্লম্বভাবে পাঠ্য সারিবদ্ধ করেন। এটি বেশ স্ট্যান্ডার্ড এবং আমি এটিকে "হ্যাক" হিসাবে বিবেচনা করি না। শুধু line-height: 100pxআপনার যোগ করুন ul.catBlock liএবং এটি ঠিক হয়ে যাবে।

এই ক্ষেত্রে আপনাকে এর ul.catBlock li aপরিবর্তে যুক্ত করতে হতে পারে যেহেতু পাঠ্যের সমস্ত পাঠ্যও liএকটি ভিতরে থাকে a। আপনি যখন এটি করেন তখন আমি কিছু অদ্ভুত জিনিসগুলি ঘটতে দেখেছি, তাই উভয়ের চেষ্টা করে দেখুন এবং কোনটি কাজ করে তা দেখুন।

Question 4

তবে বহু বছর দেরিতে এই প্রতিক্রিয়াটি হতে পারে, যে কেউ এটিকে দেখে কেবল চেষ্টা করতে চাইবে

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

ফ্যাক্সবক্সের জন্য ব্রাউজার সমর্থনটি তার চেয়ে অনেক ভাল যখন @ স্কটজৌদ্রি তার প্রতিক্রিয়া উপরের দিকে পোস্ট করেছিলেন, তবে আপনি এখনও প্রবীণ বা অন্যান্য বিকল্পগুলি বিবেচনা করতে চাইতে পারেন আপনি যদি আরও পুরানো ব্রাউজারগুলিকে সমর্থন করার চেষ্টা করছেন। ক্যানিউজ: নমনীয়

Question 5

আশ্চর্যজনকভাবে (বা না), vertical-alignসরঞ্জামটি এই কাজের জন্য সর্বোত্তমভাবে কাজ করে। সর্বোপরি, কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই।

নিম্নলিখিত উদাহরণে, আমি পজিশনিং করছি outerশরীর মাঝখানে বর্গ, এবং innerক্লাসের মাঝখানে outerবর্গ।

পূর্বরূপ: http://jsfiddle.net/tLkSV/513/

এইচটিএমএল:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

সিএসএস:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

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

দ্রষ্টব্য: আপনি নীচে আমার কোডে লক্ষ্য করতে পারেন যে আমার <span>ট্যাগ এবং <div>ট্যাগ স্পর্শ করছে। যেহেতু তারা উভয় ইনলাইন উপাদান, কোনও স্থান আসলে নো-প্রস্থের উপাদান এবং আপনার ডিভের মধ্যে একটি স্থান যুক্ত করবে, তাই এটিকে ছেড়ে যাওয়ার বিষয়ে নিশ্চিত হন।

Question 6

ভবিষ্যতে, এই সমস্যাটি ফ্লেক্সবক্সের মাধ্যমে সমাধান করা হবে। এখনই ব্রাউজার সমর্থন হতাশাজনক তবে এটি বর্তমান ব্রাউজারগুলিতে একটি ফর্ম বা অন্য কোনও ক্ষেত্রে সমর্থিত।

ব্রাউজার সমর্থন: http://caniuse.com / ফ্লেক্সবক্স

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

ফ্লেক্সবক্সে পটভূমি: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question 7

আসফের উত্তর ছাড়া এখানে কোনও নিখুঁত উত্তর সরবরাহ করা হয়নি যা কোনও কোড বা কোনও উদাহরণ সরবরাহ করে না, তাই আমি আমার অবদান রাখতে চাই ...

করতে inorder vertical-align: middle;কাজ, আপনি ব্যবহার করতে হবে display: table;আপনার জন্য ulউপাদান এবং display: table-cell;জন্য liউপাদান এবং আপনি ব্যবহার করতে পারেন তুলনায় vertical-align: middle;জন্য liউপাদান।

আপনি যে কোনো স্পষ্ট প্রদান প্রয়োজন হবে না margins, paddingsআপনার লেখা উল্লম্বভাবে মধ্যম করা।

ডেমো

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Question 8

এখানে যেমন ব্যাখ্যা করা হয়েছে: https://css-tricks.com/centering-in-the-unعلوم/ ।

বাস্তব অনুশীলনে যেমন পরীক্ষিত হয়েছে, সর্বাধিক নির্ভরযোগ্য তবে মার্জিত সমাধান হ'ল <li />প্রথম সন্তানের মতো উপাদানগুলিতে একটি সহকারী ইনলাইন উপাদান toোকানো , যার উচ্চতাটি 100% (তার পিতামাতার উচ্চতা, এর <li />) এর মধ্যে vertical-alignসেট করা উচিত এবং এর সেটটি মাঝখানে স্থাপন করা উচিত । এটি অর্জন করতে, আপনি একটি লাগাতে পারেন <span />তবে সবচেয়ে সুবিধাজনক উপায় হ'ল li:afterসিউডো ক্লাস ব্যবহার করা ।

স্ক্রিনশট: এখানে চিত্র বর্ণনা লিখুন

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Question 9

এই সমাধানটি চেষ্টা করে দেখুন

বেশিরভাগ ক্ষেত্রে সবচেয়ে ভাল কাজ করে

আপনি ব্যবহার করতে হতে পারে DIV আছে পরিবর্তে লি যে জন্য

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

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

Question 10

উল্লম্ব সারিবদ্ধ মাঝারি জন্য সহজ সমাধান ... আমার জন্য এটি একটি কবজ মত কাজ করে

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}