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


198

मैंने यह कोशिश की: 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 तरीका है?


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

10
क्रोम पर काम नहीं करता है।
इमैनुएल

4
@Blazemonger मैं कई स्थितियों की कल्पना कर सकता हूं जिसमें एक डिजाइन है जो सममित दिखता है वह मनुष्यों द्वारा लेक्सोग्राफिक स्कैनिंग को आसान बनाने के लिए बाएं संरेखित विकल्पों की तुलना में अधिक महत्वपूर्ण है। उदाहरण के लिए, यदि मैं एक लिंग का चयन करना चाहता हूं, जो स्क्रीन को 100% क्षैतिज रूप से एक मोबाइल डिवाइस पर भरता है, तो यह बहुत ही अजीब लगता है कि 'पुरुष' और 'महिला' ग्रंथों को सभी तरह से छोड़ दिया गया है।
केंट मुंठे कैस्परसन

पाठ-संरेखित-अंतिम प्रयास करें: केंद्र;
अरी

जवाबों:


30

मुझे डर है कि यह सादे सीएसएस के साथ संभव नहीं है, और पूरी तरह से क्रॉस-ब्राउज़र संगत बनाने के लिए संभव नहीं होगा।

हालाँकि, jQuery प्लगइन का उपयोग करके, आप ड्रॉपडाउन को स्टाइल कर सकते हैं:

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

यह प्लगइन selectतत्व को छुपाता है , और spanकस्टम ड्रॉप डाउन सूची शैली को प्रदर्शित करने के लिए मक्खी पर तत्व आदि बनाता है। मुझे पूरा विश्वास है कि आप आइटम को संरेखित करने के लिए स्पैन आदि पर शैलियों को बदलने में सक्षम होंगे।


web.archive.org/web/20160328192510/http://filamentgroup.com/lab/… अब यहां का उन्नत संस्करण है कि फिलामेंटग्रुप का अब रखरखाव नहीं है। github.com/fnagel/jquery-ui
cdignam

386

Chrome के लिए आंशिक समाधान है :

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

यह चयनित विकल्प को केंद्र में रखता है, लेकिन ड्रॉपडाउन के अंदर विकल्पों को नहीं।


18
सफारी पर समर्थन प्राप्त नहीं
मगर नहीं

1
एज पर भी समर्थित नहीं है।
मोर्टेंपी

13
फ़ायरफ़ॉक्स में काम नहीं करता है, लेकिन फ़ायरफ़ॉक्स में क्या काम करता है text-align: center
Noitidart

3
widthइसकी आवश्यकता नही है।
वाहिद अमीरी

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

81

यह सही संरेखित करने के लिए है। कोशिश करो:

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

text-align-lastविशेषता के लिए ब्राउज़र समर्थन यहां पाया जा सकता है: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp ऐसा लगता है कि केवल सफारी अभी भी इसका समर्थन नहीं कर रही है।


7
इस शीर्ष जवाब है, एक सरल और शुद्ध सीएसएस समाधान है कि मेरे लिए पूरी तरह से काम किया है (हालांकि मैं बदल होना चाहिए text-align-last: right;करने के लिए centerके रूप में मैं बीच में लेबल चाहता था)।
JVG

यह जवाब चट्टानों! कहीं और मुझे ऐसा सरल उपाय नहीं मिला।
udog

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

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

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

58

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

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

उदाहरण

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

सीएसएस कोड

select { text-indent: 5px; }

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

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

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

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

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

50

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

text-align-last: center;

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

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

25

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

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

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

22

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

select {

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

}

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

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

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

21

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>


1
यह एकमात्र समाधान था जिसने मुझे +1

मई 2020 - यह सफारी (या सभी iOS उपकरणों पर कोई भी ब्राउज़र) पर काम नहीं करता है
डूमड

16

यह 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


9

मैं हमेशा सीएसएस के साथ काम करने के लिए इसे प्राप्त करने के लिए निम्नलिखित हैक से दूर हो गया हूं।

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

पैडिंग पाठ को केंद्र में रखेगी और पाठ के आकार के लिए ट्विक किया जा सकता है :)

यह स्पष्ट रूप से मेरे विचार के सत्यापन बिंदु से 100% सही नहीं है, लेकिन यह काम करता है :)


7

वैकल्पिक "नकली" समाधान यदि आपके पास पाठ लंबाई में समान विकल्पों के साथ एक सूची है (उदाहरण के लिए पृष्ठ का चयन करें):

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

यह क्रोम, फ़ायरफ़ॉक्स और एज में काम करता है। चाल यहाँ पाठ को बाईं ओर से केंद्र तक धकेलने के लिए है, फिर px, em या जो भी विकल्प पाठ में है, उसकी लंबाई को आधा कर दें।

यहां छवि विवरण दर्ज करें

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


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

5

काफी केंद्रित नहीं है, लेकिन ऊपर दिए गए उदाहरण का उपयोग करके आप चुनिंदा बॉक्स में बायां मार्जिन बना सकते हैं।

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

क्यों नहीं बस जोड़ने text-indentके लिए <select>टैग की तरह @marc कैरेरस कहा?
मुनीम मुन्ना


3

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

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

2

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


2

यदि आपको कोई समाधान नहीं मिला है, तो आप इस ट्रिक को 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>

आशा है कि यह किसी के लिए उपयोगी हो सकता है क्योंकि फोनगैप पर इस समाधान को खोजने के लिए मुझे एक दिन लगा।


बीच में इसका गैर!
क्वि-गोन जिन

1

जब आप किसी विकल्प के भीतर विकल्प पाठ को केंद्र में नहीं रख सकते हैं, तो आप चयन के शीर्ष पर उसी प्रभाव के लिए एक बिल्कुल तैनात 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 दोनों के निश्चित स्थान हैं।


0

यह अभी तक 100% नहीं है, लेकिन आप इस स्निपेट का उपयोग कर सकते हैं!

पाठ-संरेखित-अंतिम: केंद्र; // क्रोम पाठ-संरेखण के लिए: केंद्र; // फ़ायरफ़ॉक्स के लिए

सफारी या एज पर काम नहीं करता है, अभी के लिए!


-3

यदि विकल्प स्थिर हैं, तो आप अपने चुनिंदा बॉक्स पर परिवर्तन घटना के लिए सुन सकते हैं और प्रत्येक व्यक्तिगत आइटम के लिए पैडिंग जोड़ सकते हैं

$('#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;
    }
});

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

-5

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

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.