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.
<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
<option class="filter-item br-8 f-14-med" type="submit" value="191">Oil ＆Gas</option>
<option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
</select>
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!
CodePudding user response：
.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;
}<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
<option class="filter-item br-8 f-14-med" type="submit" value="191">Oil ＆Gas</option>
<option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
</select>CodePudding user response：
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;
}<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
</select>CodePudding user response：
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;
}<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
<option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
<option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
<option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
<option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
<option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
<option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
<option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
<option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
<option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
<option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
<option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
<option class="filter-item br-8 f-14-med" type="submit" value="191">Oil ＆Gas</option>
<option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
</select>