নির্বাচিত বাক্সে পাঠ্যটি কেন্দ্রে রাখা সম্ভব?

Question

আমি এটি চেষ্টা করেছি: http://jsfiddle.net/ilyaD/KGcC3/

এইচটিএমএল:

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

সিএসএস:

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

আপনি দেখতে পাচ্ছেন, এটি কাজ করে না। নির্বাচন বাক্সে পাঠ্যকে কেন্দ্র করে দেখার জন্য কি কেবল CSS-র উপায় আছে?

Comments

আমার ফায়ারফক্সে এটি সঠিকভাবে কাজ করে :)

— ম্যাটিউজ রোগুলস্কি

ক্রোমে কাজ করে না।

— ইমানুয়েল

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

— কেন্ট মুনথে ক্যাস্পারসেন

পাঠ্য-প্রান্তিককরণ শেষ: চেষ্টা করুন;

— এরি

Answer 1

আমি ভয় করছি যে প্লেইন সিএসএসের মাধ্যমে এটি সম্ভব নয় এবং সম্পূর্ণ ক্রস ব্রাউজারকে সামঞ্জস্য করা সম্ভব হবে না।

তবে, jQuery প্লাগইন ব্যবহার করে, আপনি ড্রপডাউন স্টাইল করতে পারেন:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

এই প্লাগইনটি selectউপাদানটি লুকিয়ে রাখে এবং spanকাস্টম ড্রপ ডাউন তালিকার শৈলী প্রদর্শন করতে ফ্লাইতে উপাদানগুলি তৈরি করে। আমি যথেষ্ট আত্মবিশ্বাসী আপনি আইটেমগুলি সারিবদ্ধ করার জন্য স্প্যান ইত্যাদির স্টাইলগুলি পরিবর্তন করতে সক্ষম হবেন।

Comments

web.archive.org/web/20160328192510/http://filamentgroup.com/lab/… এখানে এখন উন্নত সংস্করণ যে ফিলামেন্টগ্রুপটি আর রক্ষণাবেক্ষণ করা হয় না। github.com/fnagel/jquery-ui

— cdignam

Answer 2

Chrome এর জন্য একটি আংশিক সমাধান রয়েছে :

select { width: 400px; text-align-last:center; }

এটি নির্বাচিত বিকল্পকে কেন্দ্র করে, তবে ড্রপডাউনয়ের ভিতরে বিকল্পগুলি নয়।

Comments

সাফারি

— বুটগুলি

এজ তে সমর্থিত নয়।

— মর্টেনপি

ফায়ারফক্সে কাজ করে না, তবে ফায়ারফক্সে যা কাজ করে তা হ'ল text-align: center।

— নোটিডার্ট

widthপ্রয়োজন হয় না.

— ওয়াহিদ আমিরি

জঘন্য, এটি নিখুঁত, সর্বশেষতম ফায়ারফক্সেও কাজ করে ... + rep

— w411 3

Answer 3

এটা ডান সারিবদ্ধ জন্য। এটি চেষ্টা করুন:

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

text-align-lastবৈশিষ্ট্যের জন্য ব্রাউজার সমর্থনটি এখানে পাওয়া যাবে: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp দেখে মনে হচ্ছে কেবল সাফারি এখনও এটি সমর্থন করছে না।

Comments

এই শীর্ষ উত্তর, একটি সহজ ও বিশুদ্ধ সিএসএস সমাধান আমার জন্য পুরোপুরি কাজ (যদিও আমি পরিবর্তন করা উচিত text-align-last: right;কাছে centerআমি মাঝখানে লেবেল চেয়েছিলেন)।

— JVG

এই উত্তর শিলা! এরকম সহজ সমাধান আর কোথাও পাই নি।

— udog

অনেক ধন্যবাদ, এই উত্তরটি নির্বাচিত হওয়া উচিত কারণ এটি পুরোপুরি কাজ করে!

— নিক

টেক্সট প্রান্তিককরণ-শেষ: কেন্দ্র; একা ক্রোম এবং ফায়ারফক্সে আমার জন্য কাজ করে। প্রান্তে নয় এবং আমি সাফারিও বাজি ধরব না।

— ডেনিস হেইডেন

এটি কোনও মোবাইল ব্রাউজারে কাজ করে না। প্রাথমিকভাবে এটি কাজ করতে চাই Which

— বিবর্তিত

Answer 4

আপনাকে সিএসএস নিয়মটি নির্বাচন শ্রেণিতে রাখতে হবে।

সিএসএস পাঠ্য ইনডেন্ট ব্যবহার করুন

উদাহরণ

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

সিএসএস কোড

select { text-indent: 5px; }

Comments

হয় আমি এটি পেলাম না, বা এটি টেক্সট

— প্রান্তিককরণের

পাঠ্য-ইনডেন্ট ... আকর্ষণীয়, আমি সেই সম্পত্তি সম্পর্কে জানতাম না। অনেক ধন্যবাদ!

— ফ্রয়েক্সএক্স

এটি কেবলমাত্র একটি নির্দিষ্ট বিকল্পের জন্য কাজ করবে, পাঠ্য-ইনডেন্ট নির্ভর করে সিলেক্টবক্সের প্রস্থের ক্ষেত্রে বিকল্পের পাঠ্যটি কতটা অনুভূমিক স্থান গ্রহণ করে তার উপর নির্ভর করে, সুতরাং এটি একটি অসম্পূর্ণ উত্তর, আমি অবাক হয়েছি এটি পেয়েছে 43 টি উত্স, সঠিক উত্তর উপরে পাঠ্য ইন্ডেন্ট ব্যবহার করে মিঃ স্মি দ্বারা সরবরাহ করেছিলেন।

— লু রোমান

একটি আকর্ষণীয় ধারণা, তবে এটি শতাংশের সাথে কাজ করবে না তাই আপনি কীভাবে প্রতিটি একক আইটেমকে কেন্দ্র করতে পারবেন?

— buts

এটা সঠিক উত্তর. পাঠ্য-ইন্ডেন্ট ব্যবহার করে: 50% নির্বাচনের অভ্যন্তরে আপনার জন্য বিকল্পটি কেন্দ্র করবে।

— জন স্মিথ

Answer 5

হ্যা এটা সম্ভব. আপনি টেক্সট-প্রান্তিককরণ শেষ ব্যবহার করতে পারেন

text-align-last: center;

Comments

এটি বন্ধ হয়ে গেলে সিলেক্ট প্রদর্শিত মানটিকে কেন্দ্র করে বলে মনে হচ্ছে। ড্রপডাউন-এর বিকল্পগুলি এখনও বামদিকে সংযুক্ত রয়েছে (কমপক্ষে সেপ্টেম্বর 2019 হিসাবে ক্রোমে)

— bjg222

হ্যাঁ আমি কেন্দ্রে প্রদর্শন করতে চাই এবং এটি সঠিক

— প্রীতিশ

Answer 6

2020, আমি ব্যবহার করছি:

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

Comments

দুর্ভাগ্যক্রমে, এটি সাফারিটিতে কাজ করে না ... এবং ২০২০ সালের মে পর্যন্ত, অ্যাপল এখনও আইওএসে সমস্ত অন্যান্য ব্রাউজারকে সাফারির রেন্ডার ইঞ্জিন ব্যবহার করতে

— বাধ্য করে

Answer 7

শুধু এটি ব্যবহার করে:

select {

text-align-last: center;
padding-right: 29px;

}

Comments

আপনাকে "প্যাডিং-রাইট: 29px" অন্তর্ভুক্ত করার দরকার নেই; যদি আপনি "কেন্দ্র" ব্যবহার করেন। আমি সন্দেহ করি যে আপনি এলি-এলগারির উত্তরটি 25 অক্টোবর '16 থেকে অনুলিপি করেছেন বলে আপনার সন্দেহ আছে।

— জেডেন লসন

আপনি যখন কারও উত্তর থেকে অনুলিপি করেন তখন আপনার নাম উল্লেখ করা উচিত।

— মুনিম মুন্না

নাহ, আমি আমার কোড থেকে সেটিকে সরাসরিভাবে অনুলিপি করেছিলাম, সে কারণেই আমি প্যাডিং-রাইটকে তীব্র করেছিলাম, আমি অন্য একটি থেকে সমাধানটি আমার কোডে অনুলিপি করতে পারি এবং তারপরে আমি সমাধানটি আমার কোড থেকে স্ট্যাকওভারফ্লোতে অনুলিপি করেছিলাম।

— আমিন_দেব

Answer 8

select {
  text-align: center;
  text-align-last: center;
}
option {
  text-align: left;
}

<select>
   <option value="">(please select a state)</option>
   <option class="lt" value="--">none</option>
   <option class="lt" value="AL">Alabama</option>
   <option class="lt" value="AK">Alaska</option>
   <option class="lt" value="AZ">Arizona</option>
   <option class="lt" value="AR">Arkansas</option>
   <option class="lt" value="CA">California</option>
   <option class="lt" value="CO">Colorado</option>
</select>

Comments

এটিই ছিল একমাত্র সমাধান যা আমাকে +1

2020 মে - এটি সাফারি (বা সমস্ত আইওএস ডিভাইসে কোনও ব্রাউজার) এ কাজ করে না

— ডুমড

Answer 9

এই জেএস ফাংশনটি আপনার পক্ষে কাজ করা উচিত

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

এখানে সম্পূর্ণ কোডেন: http://codepen.io/anon/pen/NxyovL

Answer 10

কেবল সিএসএস দিয়ে কাজ করার জন্য আমি নীচের হ্যাকটি দিয়ে সর্বদা দূরে চলেছি।

padding-left: 45%;
font-size: 50px;

প্যাডিং পাঠ্যটিকে কেন্দ্র করবে এবং পাঠ্যের আকারের জন্য টুইট করা যেতে পারে :)

আমার অনুমানের বৈধতার দিক থেকে এটি স্পষ্টতই 100% সঠিক নয় তবে এটি কাজটি করে :)

Answer 11

বিকল্প "জাল" সমাধানের যদি পাঠ্যের দৈর্ঘ্যের মতো বিকল্পগুলির সাথে আপনার একটি তালিকা থাকে (উদাহরণ হিসাবে পৃষ্ঠাটি নির্বাচন করুন):

padding-left: calc(50% - 1em);

এটি ক্রোম, ফায়ারফক্স এবং এজ এ কাজ করে। কৌশলটি এখানে বাম থেকে কেন্দ্রের দিকে চাপ দিতে হবে, তারপরে px, em বা বিকল্প পাঠ্যের যে কোনও অংশে দৈর্ঘ্যের অর্ধেকটি বিয়োগ করুন।

সেরা সমাধান আইএমও (২০১ in সালে) এখনও জেএসের মাধ্যমে নির্বাচনগুলি প্রতিস্থাপন করছে এবং আপনার নিজস্ব জাল নির্বাচন বাক্সটি ডিভগুলি বা যা কিছু দিয়ে তৈরি করে এবং ক্রস ব্রাউজার সমর্থনের জন্য ক্লিক ইভেন্টগুলিকে আবদ্ধ করে।

Comments

ক্রোমে কাজ করে তবে আইইতে এটি কেন্দ্রের চেয়ে কিছুটা ডানদিক দেখায়।

— ব্যবহারকারীর 3366706

Answer 12

বেশিরভাগ কেন্দ্রিক নয় তবে উপরের উদাহরণ ব্যবহার করে আপনি নির্বাচিত বাক্সে বাম মার্জিন তৈরি করতে পারেন।

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

Comments

@ মার্ক ক্যারিরা যেমন বলেছেন তেমন ট্যাগ যোগ text-indentকরবেন না কেন <select>?

— মুনিম মুন্না 15

Answer 13

এটি আমার পক্ষে কাজ করেছে:

text-align: center;
text-align-last: center;

Answer 14

এটা চেষ্টা কর :

select {
    padding-left: 50% !important;
    width: 100%;
}

Answer 15

আপনি সত্যিই কাস্টমাইজ <select>বা <option>বেশি কিছু করতে পারবেন না । একমাত্র উপায় (ক্রস-ব্রাউজার) হ'ল ডিভ এবং সিএসএস / জেএসের সাথে ম্যানুয়ালি একটি ড্রপ ডাউন তৈরি করতে অনুরূপ কিছু তৈরি করা হবে।

Answer 16

যদি আপনি কোনও সমাধান না পেয়ে থাকেন তবে আপনি এই কৌশলটি ডিগ্রিটির উপর একটি পাঠ্যের সাহায্যে নির্বাচিত মানটি কোণার জন্য জঙ্গি ব্যবহার করতে পারেন, এই সমাধানটি সিঙ্কের সাথে সম্পূর্ণ সিএসএস অনুসারে উপযুক্ত তবে সিলেক্ট এবং ডিভের মধ্যে একটি ম্যাপিং দরকার:

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

আশা করি এটি কারও পক্ষে কার্যকর হতে পারে কারণ ফোনগ্যাপে এই সমাধানটি পেতে আমার একদিন সময় লেগেছে।

Comments

এটি মাঝখানে না!

— কুই-গন জিন

Answer 17

আপনি কোনও নির্বাচনের মধ্যে বিকল্প পাঠ্যটিকে কেন্দ্র করতে পারবেন না, আপনি একই প্রভাবের জন্য নির্বাচনের উপরের অংশের উপর একেবারে অবস্থানযুক্ত ডিভি স্থাপন করতে পারেন:

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

ডিভ এবং সিলেক্ট উভয়ই নথিতে স্থির অবস্থান রয়েছে তা নিশ্চিত করুন।

Answer 18

এটি এখনও 100% নয়, তবে আপনি এই স্নিপেট ব্যবহার করতে পারেন!

পাঠ্য-সারিবদ্ধ-সর্বশেষ: কেন্দ্র; // ক্রোমের পাঠ্য-প্রান্তিককরণের জন্য: কেন্দ্র; // ফায়ারফক্সের জন্য

আপাতত সাফারি বা এজ এ কাজ করে না!

Answer 19

বিকল্পগুলি স্থিতিশীল থাকলে, আপনি আপনার নির্বাচিত বাক্সে পরিবর্তন ইভেন্টটি শুনতে এবং প্রতিটি পৃথক আইটেমের জন্য প্যাডিং যুক্ত করতে পারেন

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});

Comments

প্রতিটি শব্দের জন্য প্যাডিং-বামে রাখা ভাল ধারণা নয়। এই শব্দগুলি কীভাবে ডেটাবেস থেকে আগত এবং গতিশীল?

— ব্যবহারকারী 36459077

Answer 20

এই & nbsp যোগ করুন ...

    <option value="0"> &nbsp&nbsp&nbsp&nbsp&nbsp--Select Name--</option>

আপনি কেন্দ্র বিন্যাসিত পাঠ্যের প্রভাব না পাওয়া পর্যন্ত