0

How can I align the options to the center? Currently, they are aligned to the left.

<div class="btn-div-block">
  <select class="drivers">
    <option value="None">None</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</div>
jsotola
  • 2,238
  • 1
  • 10
  • 22
Kristofer Schultheis
  • 15
  • 7
  • Post what you have tried – Santhosh Feb 27 '20 at 06:56
  • Post your CSS (if it does exist) and more of your code (maybe there are parent-elements that change the behaviour of applying `text-align: center` on `btn-div-block`) – xKobalt Feb 27 '20 at 07:01
  • 1
    Please check this [question](https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box) – Dmytro Cheglakov Feb 27 '20 at 07:07
  • FYI We can only align selected value to center, we cannot align option to center. – Akhil Aravind Feb 27 '20 at 07:08
  • 1
    There is a limit to how much you can style – QuinnFreedman Feb 27 '20 at 07:28
  • 1
    Does this answer your question? [Is it possible to center text in select box?](https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box) – tafaust Feb 27 '20 at 07:54

3 Answers3

0

I don't know how to delete a question but I figured it out.

I had to use the padding-left in css to align it where I want it.

    .btn-div-block {
        padding:10px;
    }
    .drivers {
        height:35px;
        width:100%;
        padding-left:22px;
    }
                <div class="btn-div-block">
                <select class="drivers">
                    <option value="None">None</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
Kristofer Schultheis
  • 15
  • 7
  • If you're satisfied - great. Be sure to try this with different browsers. and different screen resolutions. Also look here: https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box – FoggyDay Feb 27 '20 at 07:25
0

in this code will show the output for your question

<div style="text-align:center">
            <select class="drivers">
                <option value="None">None</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </div>
priyabl
  • 1
0

try this code

<head>
<style>
.btn-div-block{
margin-left:50%;
}
</style>
</head>
<div class="btn-div-block">
            <select class="drivers">
                <option value="None">None</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
        </div>
priyabl
  • 1