Display Center inside the select list?

Question

This is my first here in stackoverflow, I would like to ask if it is possible to display the select option in center? Please the see image attach.

CSS:

.form-select {
    display: inline-block;
    /* display: flex; */
    flex-wrap: wrap;
    align-items: stretch;
    overflow-y: unset;
}
.form-select option {
    /* position: relative; */
    float: left;
    display: inline-flex;
    /* width: calc(100%/10); */
}

Thanks for answering!

user_12099237 · Answer

.form-select {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin:0 auto;
    width:100%;
}

.form-select option {
    display:flex;
    justify-content:center;
    background: white;
    border-radius: 5px;
    border: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px auto;
    text-align:center;
    width:fit-content;
    max-width:150px;
    
}

option:hover {
  background: lightblue;
}

user_7836833 · Answer

If you treat the options as text and use text-align: center and white-space: pre-line to the select and set display:inline-block to the options. The Options should be centered properly.

.form-select {
    display: inline-block;
    width: 100%;
    text-align: center;
    white-space: pre-line;
}

option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
}

option:hover {
  background: lightblue;
}

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

user_16496357 · Answer

It's hard to tell exactly what point or what position you are trying to display this. However, in order to accomplish what you posted in your image, I think this can lead you on the right path.

.form-select {
   display: inline-block;
   width: 100%;
   text-align: center;
   white-space: pre-line;
 }

.form-select option {
   background: white;
   display: inline-block;
   border-radius: 5px;
   border: solid;
   border-width: 1px;
   padding: 5px;
   margin: 5px;
  }

option:hover {
  background: lightblue;
}

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

Display Center inside the select list?

3 Answers