Is it possible to show the Display Center within the dropdown menu?

Hello everyone, this is my first time posting on stackoverflow. I have a question about centering the select options. Could someone please take a look at the image attached and let me know if it's possible?

<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"&%gt;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); */
}

Thank you in advance for your help!

css

Answer №1

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

.custom-select-box 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="category[]" id="edit-category" size="9" class="custom-select-box" 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">Category 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>

Answer №2

If you want to center the options in a select element, you can treat them as text and apply CSS properties such as text-align: center and white-space: pre-line. By setting display:inline-block to the options, they should be properly centered.

.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>

Answer №3

It seems like you may be unsure of the specific point or perspective you are trying to convey with this code snippet. Nevertheless, if your goal is to achieve the visual display shown in the image you provided, following these CSS styles could help guide you in the right direction.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating Bootstrap into a fresh project

I'm completely new to the world of development, so I'll do my best to phrase this question correctly! Last month, I successfully created my first web application using RoR and Bootstrap for some visual enhancements. Currently, I am working on a ...

htmlcsstwitter-bootstrap

Conquering challenges arising from organizing subdirectories for js/css/xml files

During the process of developing a website with html, css, js and xml files stored on my computer (not yet online), I initially kept all the files in one folder along with an images folder. However, as the project progressed and things started to get mes ...

javascripthtmlcssxml

Tips for distinguishing the beginning and ending points of wrapped text in the Firefox browser

Within my work, I am utilizing a contentEditable span where I aim to position an element with position: absolute on the same line as the cursor. However, issues arise when text wrapping occurs - causing abnormal behavior at the start and end of wrapped lin ...

javascripthtmlcss

The appearance of the webkit-scrollbar is not reflecting the intended style

I have successfully created a wrapper for a styled scrollbar in React JS - import styled from '@emotion/styled'; export const ScrollbarWrapper = styled.div(() => ({ maxHeight: '65vh', overflowY: 'auto', '*::-web ...

javascripthtmljquerycssreactjs

CSS transformation on the go

Can anyone help me? I am trying to create an animation for a hamburger menu when checked and unchecked. I have managed to animate the menu, but I'm struggling with animating the left menu when transforming it to 0. &__menu { transform: transla ...

csssasscss-transitions

Split-button dropdowns within tabs implemented with Bootstrap

I'm looking to create a navigation menu that combines both split buttons and dropdown tabs. I've found examples of each individually, but can't figure out how to merge the two: "Tabs with dropdowns" Is it possible to have a tab with a drop ...

htmlcsstwitter-bootstrap

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

javascripthtmlcsscumulative-sum

There seems to be a problem with the background repeating space in the CSS

body { background-image: url("https://source.unsplash.com/user/c_v_r/100x100"); background-size: 100px; background-repeat: space; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA- ...

htmlcss

Utilizing jQuery in Wordpress to Toggle Content Visibility

Currently, my website pulls the 12 most recent posts from a specific category and displays them as links with the post thumbnail image as the link image. To see an example in action, visit What I am aiming to achieve is to enhance the functionality of my ...

javascriptjqueryhtmlcsswordpress

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

cssnext.js

Internet Explorer is automatically inserting extra vertical space after the first list item in a basic menu design

Does anyone else have trouble with IE? (Or is it just me?) I'm creating a list with a background. The first and last LI elements are 5px high, while the others are 16px high. However, in IE there's a strange blank space between the first and se ...

jquerycssinternet-explorerhtml-lists

Ways to navigate through a webpage without encountering any overflow issues

My window is too small to scroll, but I still need the ability to do so. Is it possible to scroll even when the height of the container is not large enough to display the scrollbar? Below is the code I am using to achieve scrolling: setTimeout(function() ...

javascriptjqueryhtmlcss

CSS for a Dropdown Menu with Multiple Layers

I've successfully implemented a dropdown menu, but now I'm facing the challenge of adding another level to it. Specifically, I want a second level to drop down when hovering over "Test3". What do I need to add or modify in the code to achieve thi ...

htmlcss

The flipping action will only occur on the initial card

I am working on creating a unique photo gallery that allows users to flip the picture by clicking or tapping on it. Once flipped, users will be presented with additional information about the image and a link. I have included all of my CSS, JS, and HTML be ...

jqueryhtmlcsscss-transforms

How to use JQuery to retrieve multiple background image URLs from CSS styling

Initially, here is the CSS code that I am working with: background-image: url(/style_elements/img/first.png), url(/style_elements/img/second.png); I am trying to specifically target the second background image URL using jQuery: var item_img_url = item_i ...

jquerycssurlbackgroundbackground-image

What could be the reason for this tag not functioning properly?

I am facing an issue with my navbar where the <a> tag is not updating the URL to the new address. I have tried giving the <a> tag a z-index 999;, but it still doesn't work. This is a one-page site and I use # to make the browser jump to t ...

htmlcssflexboxnavbar

Selecting a date in a pop-up

In my PHP application, I have incorporated a date selection feature within a modal dialog. However, when clicking the control, the calendar appears in the left corner of the page and remains visible even after selecting a date. Additionally, clicking elsew ...

htmlcssdatepicker

How to incorporate Django syntax into CSS styling

Imagine a scenario where a Django site is equipped with numerous stylesheets. CSS and JS files are located in the static/ directory within an app's folder or in the global site directory. Various color themes are employed across different pages, neces ...

pythondjangocss

Utilizing the optimal method for aligning text to either the right or left side

I am currently working on creating a container element with multiple child elements. I would like these elements to be aligned differently, some left-aligned and others right-aligned. This includes scenarios where the child elements themselves are containe ...

htmlcss

The hamburger menu icon is not visible

I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed som ...

htmlcssresponsive-designhamburger-menu