क्या चुनिंदा बॉक्स में टेक्स्ट को केंद्र में रखना संभव है?

Question

मैंने यह कोशिश की: http://jsfiddle.net/ilyaD/KGcC3/

HTML:

<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-only तरीका है?

Comments

मेरे फ़ायरफ़ॉक्स में यह सही काम करता है :)

— Mateusz Rogulski

क्रोम पर काम नहीं करता है।

— इमैनुएल

@Blazemonger मैं कई स्थितियों की कल्पना कर सकता हूं जिसमें एक डिजाइन है जो सममित दिखता है वह मनुष्यों द्वारा लेक्सोग्राफिक स्कैनिंग को आसान बनाने के लिए बाएं संरेखित विकल्पों की तुलना में अधिक महत्वपूर्ण है। उदाहरण के लिए, यदि मैं एक लिंग का चयन करना चाहता हूं, जो स्क्रीन को 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।

— Noitidart

widthइसकी आवश्यकता नही है।

— वाहिद अमीरी

अरे, यह एकदम सही है, नवीनतम फ़ायरफ़ॉक्स पर भी काम करता है ... + प्रतिनिधि

— 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

बहुत बहुत धन्यवाद, यह उत्तर चयनित होना चाहिए क्योंकि यह पूरी तरह से काम करता है!

— निक

पाठ के अनुरूप-पिछले: केंद्र; अकेले क्रोम और फ़ायरफ़ॉक्स में मेरे लिए काम करता है। धार में नहीं और मैं सफारी पर दांव लगाऊंगा या नहीं।

— डेनिस हेडेन

यह किसी भी मोबाइल ब्राउज़र में काम नहीं करता है। यह वह जगह है जहां मुख्य रूप से मैं इसे काम करना चाहूंगा।

— evolross

Answer 4

आपको सीएसएस नियम को चुनिंदा वर्ग में रखना होगा।

सीएसएस पाठ-इंडेंट का उपयोग करें

उदाहरण

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

सीएसएस कोड

select { text-indent: 5px; }

Comments

या तो मुझे यह नहीं मिला, या यह केवल पाठ को संरेखित करने के लिए काम नहीं करता है

— गणितज्ञ

पाठ-इंडेंट ... दिलचस्प है, मुझे उस संपत्ति के बारे में पता नहीं था। आपका बहुत बहुत धन्यवाद!

— फ्राक्सक्स

यह केवल एक विशिष्ट विकल्प के लिए काम करेगा, पाठ-इंडेंट इस बात पर निर्भर करता है कि चयन बॉक्स की चौड़ाई के संबंध में विकल्प का पाठ कितना क्षैतिज स्थान लेता है, इसलिए यह एक अधूरा उत्तर है, मुझे आश्चर्य है कि इसे 43 अपवोट्स मिले, उचित उत्तर ऊपर श्री स्मि द्वारा पाठ इंडेंट का उपयोग किया गया था।

— लू रोमन

एक दिलचस्प विचार है, लेकिन यह एक प्रतिशत के साथ काम नहीं करेगा ताकि आप हर एक आइटम को कैसे केंद्र कर सकें?

— बट्स

यह सही जवाब है। पाठ-इंडेंट का उपयोग करना: 50% आपके लिए चयन के अंदर विकल्प को केंद्रित करेगा।

— जॉन स्मिथ

Answer 5

हाँ यह संभव है। आप पाठ-संरेखित-अंतिम का उपयोग कर सकते हैं

text-align-last: center;

Comments

यह बंद होने पर चयन में प्रदर्शित मूल्य को केंद्र में रखता है। ड्रॉपडाउन में विकल्प अभी भी बाईं ओर (कम से कम क्रोम में सितंबर 2019 तक) से जुड़े हुए हैं

— bjg222

हां मैं केंद्र में प्रदर्शित करना चाहता हूं और यह सही है

— प्रितेश

Answer 6

2020, Im का उपयोग कर:

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

Comments

दुर्भाग्य से, यह सफारी में काम नहीं करता है ... और मई 2020 तक, Apple अभी भी सफारी के रेंडर इंजन का उपयोग करने के लिए iOS पर अन्य सभी ब्राउज़रों को मजबूर करता है ...

— Doomd

Answer 7

बस इस का उपयोग कर:

select {

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

}

Comments

आपको "पैडिंग-राइट: 29px;" शामिल करने की आवश्यकता नहीं है यदि आप "केंद्र" का उपयोग कर रहे हैं। मुझे संदेह है कि आपके पास 25 -16 अक्टूबर से Aly-Elgarhy के उत्तर की नकल है।

— Jayden लॉसन

जब आप किसी के उत्तर से कॉपी करते हैं तो आपको उनके नामों का उल्लेख करना चाहिए।

— मुनीम मुन्ना

नहींं, मैंने इसे अपने कोड से सीधे कॉपी किया है जैसा कि यह है, इसलिए मैंने पैडिंग-राइट डाला है, क्या मुझे समाधान को किसी दूसरे से अपने कोड में कॉपी किया जा सकता है, और फिर मैंने अपने कोड से स्टैकओवरफ़्लो में समाधान की प्रतिलिपि बनाई।

— Amine_Dev

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 - यह सफारी (या सभी iOS उपकरणों पर कोई भी ब्राउज़र) पर काम नहीं करता है

— डूमड

Answer 9

यह JS फ़ंक्शन आपके लिए काम करना चाहिए

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 या जो भी विकल्प पाठ में है, उसकी लंबाई को आधा कर दें।

बेस्ट सॉल्यूशन IMO (2017 में) अभी भी JS के माध्यम से सेलेक्ट की जगह ले रहा है और div या जो भी हो उस पर क्लिक करें और क्रॉस-ब्राउजर सपोर्ट के लिए इस पर क्लिक करें।

Comments

क्रोम में काम करता है, लेकिन IE में यह केंद्र की तुलना में दाईं ओर थोड़ा दूर दिखता है।

— user3366706

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>टैग की तरह @marc कैरेरस कहा?

— मुनीम मुन्ना

Answer 13

यह मेरे लिए काम किया:

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

Answer 14

इसे इस्तेमाल करे :

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

Answer 15

आप वास्तव में अनुकूलित <select>या <option>बहुत कुछ नहीं कर सकते । एकमात्र तरीका (क्रॉस-ब्राउज़र) मैन्युअल रूप से divs और css / js के साथ ड्रॉप डाउन बनाना होगा ताकि कुछ समान बनाया जा सके।

Answer 16

यदि आपको कोई समाधान नहीं मिला है, तो आप इस ट्रिक को angularjs पर या js का उपयोग करके div पर एक टेक्स्ट के साथ चयनित मूल्य को मैप करने के लिए उपयोग कर सकते हैं, यह सॉल्यूशन कोणीय पर पूर्ण css अनुरूप है, लेकिन चयन और div के बीच मैपिंग की आवश्यकता है:

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

जब आप किसी विकल्प के भीतर विकल्प पाठ को केंद्र में नहीं रख सकते हैं, तो आप चयन के शीर्ष पर उसी प्रभाव के लिए एक बिल्कुल तैनात div रख सकते हैं:

#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>

सुनिश्चित करें कि दस्तावेज़ में div और select दोनों के निश्चित स्थान हैं।

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

प्रत्येक शब्द के लिए पेडिंग-लेफ्ट लगाना एक अच्छी विचारधारा नहीं है। डे डेटाबेस से आने वाले इस शब्द के बारे में और गतिशील हैं?

— user3645907

Answer 20

इस तरह जोड़ें & nbsp ...

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

जब तक आप केंद्र संरेखित पाठ का एक प्रभाव प्राप्त नहीं करते