Maison > interface Web > tutoriel CSS > Comment puis-je centrer le texte dans une zone de sélection (une solution spécifique à Chrome) ?

Comment puis-je centrer le texte dans une zone de sélection (une solution spécifique à Chrome) ?

Patricia Arquette
Libérer: 2024-12-14 17:29:15
original
222 Les gens l'ont consulté

How Can I Center Text in a Select Box (A Chrome-Specific Solution)?

Alignement du texte pour la zone de sélection : une solution partielle réservée à Chrome uniquement

Vous souhaiterez peut-être centrer le texte dans une zone de sélection pour des raisons esthétiques ou pour améliorer l'accessibilité. Cependant, l'ajout manuel d'un attribut text-align à l'élément select en CSS peut ne pas fonctionner comme prévu.

Tentatives initiales

Une approche courante est illustrée dans le violon fourni :

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="">(please select a state)</option>
<option>
Copier après la connexion


select .lt { text-align: center ; ><br>

Malheureusement, cette technique est inefficace.

Solution spécifique à Chrome

Bien qu'il s'agisse d'une solution CSS uniquement car l'alignement complet du texte peut ne pas être possible sur tous les navigateurs, il existe une solution partielle pour Chrome :

select { width: 400px; texte-align-last:center; }<br>

Cette méthode centre l'option sélectionnée dans la liste déroulante elle-même mais pas les options non sélectionnées. C'est un pas de plus vers un alignement complet mais aussi une limitation dont il faut être conscient.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal