Centrer le text d'une liste déroulante d'un formulaire html / css

Active 07 octobre 2016    /    Viewed 5942    /    Comments 0    /    Edit


Exemple de comment centrer le texte sélectionné dans une liste déroulante d'un formulaire avec text-align-last: center;.

Centrer le text d'une liste déroulante d'un formulaire html / css

Par contre centrer le texte dans les options est un peu plus difficile et il n'existe pas de solution simple avec css pour faire cela.

<!DOCTYPE html>
<html>
<head>
    <title>Test Select Form Center Text</title>
    <style>
        input[type=text], select {
          text-align: center;
          text-align-last: center;
          width: 400px;
        }
    </style>
</head>
<body>

<br><br>

<select>
    <option value=1 >Select 1</option>
    <option value=2 >Select 2</option>
    <option value=3 >Select 3</option>
    <option value=4 selected>Select 4</option>
    <option value=5 >Select 5</option>
</select>

<br><br>

<select>
    <option value=1 >Select 1</option>
    <option value=2 >Select 2</option>
    <option value=3 >Select 3</option>
    <option value=4 selected>Select 4</option>
    <option value=5 >Select 5</option>
</select>

<br><br>

<input type="submit" value="Submit Button" style="width: 400px;">


</body>
</html>

Références


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!