কেন্দ্র এইচটিএমএল ইনপুট পাঠ্য ক্ষেত্র স্থানধারক

Question

আমি কীভাবে এইচটিএমএল আকারে ইনপুট ক্ষেত্রের স্থানধারকের সারিবদ্ধতাটি কেন্দ্র করতে পারি?

আমি নিম্নলিখিত কোডটি ব্যবহার করছি, তবে এটি কার্যকর হয় না:

সিএসএস ->

input.placeholder {
    text-align: center;
}
.emailField {
    top:413px;
    right:290px;
    width: 355px;
    height: 30px;
    position: absolute;
    border: none;
    font-size: 17;
    text-align: center;
}

এইচটিএমএল ->

<form action="" method="POST">
    <input type="text" class="emailField" placeholder="[e-mail]" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

Comments

আসলেই কোনও উত্তর নয়, তবে jQuery মোবাইল এটি করে যাতে তারা এটি কীভাবে অর্জন করতে পারে তা আপনি দেখতে চাইতে পারেন।

— ইভানস

আমার জন্য, আপনার কোডটি কাজ করে যখন আপনি input.placeholderকিছুটা ছাড়িয়ে যান। কেন্দ্রে ইনপুটটির ভিতরে পাঠ্য সারিবদ্ধ করা স্থানধারকটিকেও প্রান্তিক করে তোলে।

— ক্যানাইডাইড

Answer 1

আপনি যদি কেবল স্থানধারক শৈলী পরিবর্তন করতে চান

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

Comments

এটি বেশিরভাগ ইনপুট ক্ষেত্রের জন্য সূক্ষ্ম কাজ করে তবে টাইপ তারিখের জন্য নয়। আপনি কীভাবে এটি তারিখের জন্য কীভাবে কাজ করবেন জানেন?

— কর্নেলিয়াস পার্কিন

Answer 2

input{
   text-align:center;
}

আপনার যা দরকার তা হল।

এফএফ 6-এ কাজ করার উদাহরণ । এই পদ্ধতিটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে না।

আপনার পূর্ববর্তী সিএসএস একটি ইনপুট উপাদানটির পাঠ্যকে কেন্দ্র করার চেষ্টা করছিল যা "স্থানধারক" শ্রেণীর ছিল।

Comments

আমি স্থানধারকটিকে পাশাপাশি ক্ষেত্রের মধ্যে লেখাটি প্রবেশ করতে চাই না

— সর্বোচ্চ_

হ্যাঁ. এটি এই উদাহরণটি করে। স্থানধারকটি ক্ষেত্রের পাঠ্য।

— জেমি ডিকসন

এটি উদাহরণে কাজ করে না। উদাহরণস্বরূপ, স্থানধারক সারিবদ্ধভাবে রেখে গেছে।

— সর্বাধিক_

সাবধান, আপনি যদি বুটস্ট্র্যাপ বা সিমেটিক ইউআইয়ের মতো লাইব্রেরি ব্যবহার করেন তবে আপনাকে অবশ্যই স্টাইলের ইনলাইন যুক্ত করতে হবে, <input type="text" placeholder="Search..." style="text-align: right;">এটি কাজ করার জন্য। বা important!আপনি যদি বাহ্যিক ফাইল ব্যবহার করেন তবে আপনার সিএসএস নিয়মে যুক্ত করুন ।

— বেহাদাদ

দেখে মনে হচ্ছে আপনার সর্বোচ্চ সমস্যাটি ব্রাউজারের সামঞ্জস্যের সমস্যা। এটি সাফারি বাদে বেশিরভাগ প্রধান ব্রাউজারগুলিতে কাজ করে।

— ক্যানাইডাইসড

Answer 3

এইচটিএমএল 5 স্থানধারক উপাদানটি ব্রাউজারগুলির জন্য স্টাইলযুক্ত করা যেতে পারে যা উপাদানটি গ্রহণ করে, তবে বিচ্ছিন্ন উপায়ে, আপনি এখানে দেখতে পারেন: http://davidwalsh.name/html5- placeholder-css ।

তবে আমি বিশ্বাস করি না যে text-alignএটি ব্রাউজারগুলি দ্বারা ব্যাখ্যা করা হবে। কমপক্ষে Chrome এ, এই বৈশিষ্ট্যটিকে উপেক্ষা করা হবে। কিন্তু আপনি সবসময় অন্যান্য বিষয়ের পরিবর্তন করতে পারেন, মত color, font-size, font-familyইত্যাদি আমি তোমাদের কিনা সম্ভব এই কেন্দ্র আচরণ মুছে ফেলার জন্য আপনার নকশা ভান্ডারের চিন্তা সুপারিশ।

সম্পাদনা

আপনি যদি সত্যই এই পাঠ্যটি কেন্দ্রিক করতে চান তবে স্থানধারক আচরণ অনুকরণের জন্য আপনি সর্বদা কিছু jQuery কোড বা প্লাগইন ব্যবহার করতে পারেন। এটির একটি নমুনা এখানে: http://www.hagenburger.net/BLOG/HTML5- ইনপুট- স্থানধারক- ফিক্স- উইথ- jQuery.html ।

এই পদ্ধতিতে শৈলী কাজ করবে:

input.placeholder {
    text-align: center;
}

Answer 4

আপনি এটি তৈরি করতে পারেন:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="[e-mail]" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

ওয়ার্কিং কোডপেন এখানে

Comments

এটি কেবল আমার জন্য কাজ করছে। হতে পারে এইচটিএমএলতে যুক্ত শৈলীদের আরও অগ্রাধিকার দেওয়া হয় বা অন্য সমস্ত স্টাইলকে ওভাররাইড করা হয়।

— গোকুল

Answer 5

এটি আমার প্রয়োজনের জন্য সূক্ষ্মভাবে কাজ করে, আপনার ব্রাউজারের জন্য সামঞ্জস্যতা পরীক্ষা করা উচিত, আমার সমস্যা নেই কারণ আমি পশ্চাদপটে সামঞ্জস্যের যত্ন নিই না

.inputclass::-webkit-input-placeholder {
text-align: center;
}
.inputclass:-moz-placeholder { /* Firefox 18- */
text-align: center;  
}
.inputclass::-moz-placeholder {  /* Firefox 19+ */
text-align: center;  
}
.inputclass:-ms-input-placeholder {  
text-align: center; 
}

Comments

এই উত্তরটি অন্য উত্তরের সরাসরি অনুলিপি নয়?

— আনোয়ার

Answer 6

আপনি স্থানধারকের জন্য সিএসএস লেখার জন্যও এইভাবে ব্যবহার করতে পারেন

input::placeholder{
   text-align: center;
}

Answer 7

আপনি এটির মতো চেষ্টা করতে পারেন:

input[placeholder] {
   text-align: center;
}

Answer 8

::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { 
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

Answer 9

নীচের কোড স্নিপেট ব্যবহার করে আপনি নিজের ইনপুটটির ভিতরে প্লেসোল্ডার নির্বাচন করছেন এবং এর ভিতরে থাকা কোনও কোড কেবল স্থানধারককে প্রভাবিত করবে।

input::-webkit-input-placeholder {
      text-align: center
}

Comments

এই উত্তর গৃহীত উত্তরের তুলনায় আলাদা কিছু প্রস্তাব বলে মনে হচ্ছে না ।

— আন্তন মেনশভ

এই উত্তরটি সমস্ত স্থানধারীর বিপরীতে কেবলমাত্র একটি নির্দিষ্ট উপাদানের স্থানধারককে কীভাবে পরিবর্তন করতে পারে তার একটি ইঙ্গিত দেয়। যেমন .foo::-webkit-input-placeholder { … }।

— হেনরিক এন

Answer 10

আপনি নীচের মতো শ্রেণিতে সেট ব্যবহার করতে পারেন এবং পাঠ্য শ্রেণীর
সিএসএস ইনপুট করতে সেট করতে পারেন :

 .place-holder-center::placeholder {
        text-align: center;
    }

এইচটিএমএল:

<input type="text" class="place-holder-center">