সিএসএস: কিভাবে একটি "ডিভ" এর ভিতরে উল্লম্বভাবে একটি "লেবেল" এবং "ইনপুট" সারিবদ্ধ করবেন?

Question

নিম্নলিখিত কোড বিবেচনা করুন :

এইচটিএমএল:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

সিএসএস:

div {
    height: 50px;
    border: 1px solid blue;
}

কি করা সবচেয়ে সহজ পদ্ধিতি হল পদ্ধতি হবে labelএবং inputমাঝখানে div(উল্লম্বভাবে)?

Comments

আমার জ্ঞানের মতে, নীচের লাইনটি "আপনি পারবেন না" এবং এর চারপাশের সবচেয়ে অলস উপায়টি হল একটি সাধারণ ব্যবহার করা <table>এবং এর ক্ষেত্রে প্রয়োগ valign='middle'করা <td>।

— বিমারগুই

Answer 1

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

এই পদ্ধতির সুবিধা হ'ল আপনি এর উচ্চতা পরিবর্তন করতে পারেন div, পাঠ্য ক্ষেত্রের উচ্চতা পরিবর্তন করতে এবং ফন্টের আকার পরিবর্তন করতে পারেন এবং সবসময় মাঝখানে থাকবেন।

http://jsfiddle.net/53ALd/6/

Comments

মার্জিত দেখায় :) এই পদ্ধতিটি কীভাবে ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ কেউ জানেন?

— জ্যাভেন নাহপেটিয়ান

আই আই এর জন্য, আমি মনে করি এটি কেবল আইই 8 বা আরও ভাল কাজ করে। অন্যান্য ওয়েব ব্রাউজারগুলির জন্য এটি ঠিক আছে।

— মার্ক-ফ্রানসোয়া

আমি সম্পর্কে জানেন না display: table-cell। এটি কি নির্দিষ্ট ব্রাউজারগুলিতে সমর্থিত?

— বিমারগুই

@ মিশা আপনার ইনপুট / লেবেলটি একেবারে অবস্থিত ছিল তা সত্য উল্লেখ করা উচিত। এটি পুরোপুরি প্রশ্নের পরিস্থিতি পরিবর্তন করে। আমি মার্ককে একটি +1 দিচ্ছি। দুর্দান্ত উত্তর।

— jessegavin

আমি মোটামুটি নিশ্চিত যে জেনসন পয়েন্টটি তৈরি করার চেষ্টা করছিল (এবং স্পষ্ট করে বলা উচিত) তা হল ডিভগুলি ব্যবহার করে display: table-cellএমনভাবে আচরণ করা যা তারা আচরণ করবে বলে আশা করা হয় না, যেমন পরবর্তী লাইনগুলি একই লাইন / ইত্যাদি ক্ষেত্রে রেন্ডারিং করে।

— তাসউইন

Answer 2

আরও আধুনিক পদ্ধতিতে সিএসএস ফ্লেক্স-বক্স ব্যবহার করা হবে।

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

আরও জটিল উদাহরণ ... যদি আপনার ফ্লেক্স প্রবাহে একাধিক উপাদান থাকে তবে আপনি একক উপাদানকে নির্দিষ্ট বিন্যাসে আলাদাভাবে সারিবদ্ধ করতে অ্যালাইন-সেল্ফ ব্যবহার করতে পারেন ...

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}

<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

অনুভূমিক এবং উল্লম্বভাবে কেন্দ্র করাও এটি অত্যন্ত সহজ:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

Comments

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

— কেভিন Scharnhorst

লেবেল এবং পাঠ্যটি পৃথক উপাদান হিসাবে কাজ করে বা আপনার লেবেলটিকে যদি একটি ফ্লেক্সবক্সও করে তোলে তা কার্যকর হয় ...

— হোলার উইল

display:flexকম সামঞ্জস্যতা রয়েছে, ক্রোম

Answer 3

এটি ক্রস ব্রাউজারে কাজ করে, আরও অ্যাক্সেসযোগ্যতা সরবরাহ করে এবং কম মার্কআপের সাথে আসে। খাঁজ ডিভ লেবেল জড়ান

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

Comments

এটি অবশ্যই দুটি লাইনের লেবেলের জন্য কাজ করবে না। এবং আপনি যদি নিশ্চিত হন যে লক্ষ লক্ষ অন্যান্য বিকল্পের চেয়ে লেবেল সর্বদা একক লাইনে থাকে।

— ল্যাশে

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

— আলবার্ট

এটি একক লাইন লেবেলের জন্য সেরা উত্তর। স্পেসিফিকেশনটি বলে: "যদি বৈশিষ্ট্যের জন্য নির্দিষ্ট না করা হয় তবে লেবেলের উপাদানটিতে একটি লেবেলযুক্ত ফর্ম-সম্পর্কিত উপাদান বংশধর থাকে তবে গাছের ক্রমে এই জাতীয় বংশধর হ'ল লেবেল উপাদানটির লেবেলযুক্ত নিয়ন্ত্রণ।" সুতরাং এটিই একমাত্র পদ্ধতির যেখানে আপনি সর্বাধিক সরলতার জন্য গুণাবলী forএবং idবৈশিষ্ট্যগুলি বাদ দিতে পারেন ।

— সংসদ

Answer 4

আমি সচেতন যে এই প্রশ্নটি প্রায় দুই বছর আগে জিজ্ঞাসা করা হয়েছিল, তবে যে কোনও সাম্প্রতিক দর্শকদের জন্য, এখানে একটি বিকল্প সমাধান রয়েছে, যার মার্ক-ফ্রাঞ্জোইসের সমাধানের তুলনায় কয়েকটি সুবিধা রয়েছে:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

এখানে আমরা কেবলমাত্র line-heightডিভের উচ্চতার সমান যোগ করি । আপনি যে সুবিধাটি পাবেন তা এখন ডিভের প্রদর্শন সম্পত্তি হিসাবে আপনি উপযুক্ত হিসাবে দেখতে পাবেন, inline-blockউদাহরণস্বরূপ, এবং এর বিষয়বস্তু উল্লম্বভাবে কেন্দ্রে থাকবে। গৃহীত সমাধানটির জন্য আপনাকে ডিভটি একটি টেবিল সেল হিসাবে বিবেচনা করতে হবে। ক্রস ব্রাউজারে এটি পুরোপুরি কাজ করা উচিত।

কেবলমাত্র দুটি সুবিধা হ'ল দুটির পরিবর্তে আরও একটি সিএসএস নিয়ম :)

চিয়ার্স!

Answer 5

ব্যবহারের paddingউপর div( উপরের এবং নীচের ) এবং vertical-align:middleউপর labelএবং input।

http://jsfiddle.net/VLFeV/1/ এ উদাহরণ

Comments

এটি jsfiddle উপর কাজ করে না। আমি এর উচ্চতা পরিবর্তন করেছি divএবং ভিতরে থাকা সামগ্রীটি মোটেও সরেনি। আমি কিছু অনুপস্থিত করছি?

— বিমারগুই

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

— থার্ডেন্ডার

Answer 6

সংজ্ঞায়িত উচ্চতা সহ অন্য ডিভের মধ্যে লেবেল এবং ইনপুটটি মোড়ুন। এটি 8 টিরও কম IE সংস্করণে কাজ করতে পারে না।

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

Answer 7

আপনি display: table-cellনিম্নলিখিত কোড হিসাবে সম্পত্তি ব্যবহার করতে পারেন :

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }