Est-il possible de centrer le texte dans une boîte de sélection ?

Question

Est-il possible de centrer le texte dans une boîte de sélection ?

Demandé el 30 de Mai, 2012: Quand la question a-t-elle été
545845 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai essayé ceci : 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>

CSS :

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

Comme vous pouvez le constater, cela ne fonctionne pas. Existe-t-il une méthode CSS pour centrer le texte dans la boîte de sélection ?

Demandé el 30 de Mai, 2012 par ilyo

Answer 1

5 Réponses

Answer 2

2voto

jup31 Points 53

Si vous n'avez pas trouvé de solution, vous pouvez utiliser cette astuce sur angularjs ou en utilisant js pour faire correspondre la valeur sélectionnée avec un texte dans la div, cette solution est entièrement conforme aux css sur angular mais nécessite une correspondance entre la sélection et la 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>

J'espère que cela pourra être utile à quelqu'un car il m'a fallu une journée pour trouver cette solution sur phonegap.

Répondu el 25 de Mars, 2016 par jup31 (53 Points )

Answer 3

1voto

Lukáš Brýla Points 121

Sur votre utilisation sélectionnée largeur : auto et pas de remplissage pour voir la longueur de votre texte. J'utilise une largeur disponible de 100% pour ma sélection et toutes mes options ont la même longueur, ce qui me permet d'utiliser des css très simples.

Indentation du texte déplacera le texte de la gauche, de manière similaire à padding-left
120px est la longueur de mon texte - Je veux le centrer, donc je prends la moitié de cette taille et la moitié de la taille de la sélection, ce qui me laisse 50% - 60px.

select{
  width: 100%;
  text-indent: calc(50% - 60px);
}

Que se passe-t-il si j'ai des options de tailles différentes ?

Il est possible, cependant, que la solution ne soit pas belle à voir.
La première solution peut vous permettre de vous rapprocher du centre si la différence entre les options n'est pas de l'ordre de 5 caractères.

Si vous avez encore besoin de le centrer plus précisément, vous pouvez procéder comme suit

Préparer cette classe :

.realWidth{
   width: auto;
}

Appliquer l'écouteur onChange à l'élément sélectionné

Dans cet auditeur appliquer .realWidth à l'élément de sélection avec

const selectRef = document.getElementById("yourId");
selectRef.classList.add("realWidth");

Accédez à la largeur réelle de l'option.

const widthOfSelect = selectRef.getBoundingClientRect().width / 2;

widthOfSelect est la largeur recherchée. Stockez-la dans une variable globale/composante.

Supprimez la largeur réelle (realWidth), vous n'en avez plus besoin.

selectRef.classList.remove("realWidth");

J'utilise react , Je ne suis pas sûr que cela fonctionnera avec vanilla. Si ce n'est pas le cas, il faut trouver une autre solution.

<select style={`textIndent: calc(50% - ${widthOfSelect}) %`}> ... </select>

Une autre solution, cependant, qui n'est pas bonne, pourrait consister à créer les classes CSS avec js et à les placer dans l'en-tête.

AVANTAGES :

fonctionne probablement, je n'ai pas essayé la solution dynamique mais elle devrait fonctionner.

CONS :

si le programme n'est pas assez rapide, l'utilisateur verra la largeur : auto se produire et se demandera ce qui se passe. Si c'est le cas, il suffit de créer une double sélection, de la cacher derrière un élément ayant un indice z plus élevé et d'appliquer l'auditeur on select de l'original à la double sélection cachée.
Il peut être difficile à utiliser si vous ne pouvez pas intégrer le style à cause de la limitation de vanilla, mais vous pouvez faire un script pour optimiser l'appendChild à l'en-tête.

Répondu el 28 de Janvier, 2021 par Lukáš Brýla (121 Points )

Answer 4

1voto

szozz Points 115

Bien que vous ne puissiez pas centrer le texte de l'option dans une sélection, vous pouvez placer une div positionnée de manière absolue au-dessus de la sélection pour obtenir le même effet :

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

Assurez-vous que la div et la sélection ont des positions fixes dans le document.

Répondu el 31 de Juillet, 2014 par szozz (115 Points )

Answer 5

0voto

keratacon Points 91

J'ai rencontré ce problème lorsqu'un client insistait sur ce point, et qu'il utilisait un Mac et un iPhone.

J'ai fini par utiliser des requêtes média et un pourcentage de remplissage pour le padding-left. Cette solution était-elle satisfaisante ? Pas du tout, mais elle m'a permis de passer à autre chose.

Répondu el 16 de Janvier, 2021 par keratacon (91 Points )

Answer 6

0voto

Tanishka Bansal Points 35

C'est le moyen le plus simple : Utiliser l'espacement à gauche

select{
   padding-left:2rem
}

Répondu el 6 de Août, 2021 par Tanishka Bansal (35 Points )

Est-il possible de centrer le texte dans une boîte de sélection ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Est-il possible de centrer le texte dans une boîte de sélection ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: