'I cannot change position and add spaces between selection tags in html

<div class="selection_menu">
    <select name="Island" id="select_island" class="select_island">
        <option value="1">Island</option>
        <option value="2">West Java</option>
        <option value="3">Sumatra</option>
        <option value="4">Bali Pupuan</option>
    </select>
    
    

    <select name="type" id="select_type"  class="select_type">
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="select_process" class="select_process">
        <option value="1">Process Method</option>
        <option value="2">Natural</option>
        <option value="3">Honey</option>
        <option value="4">Dry Hulled</option>
        <option value="5">Wet Hulled</option>
        <option value="6">Extended Natural</option>
        <option value="7">Full Wash</option>
    </select>

    <select name="select_quality" id="select_quality" class="select_quality">
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="select_available" class="select_available">
        <option value="1">Availability</option>
        <option value="2">Available now</option>
        <option value="3">Not yet available</option>
    </select>
    

   <select name="select_cp" id="select_cp" class="select_cp">
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>

My selection tags are in a div and I tried : align-items: center, justify-content: center, justify-content: space-between. But it simply didn't work. How do I center them and add even spaces between them?

How do I put even spaces between them and center them in my div?

html css

Solution 1:^[1]

Firstly you dont need to use flexbox system. The form elements are inline elements and you can use text-align: center. But i dont know you entire css and i write the example by using flexbox.

Add only this to your css:

    .selection_menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;  
    }

    .select_island {
      display: block;
    }

With gap can increase or decrease the space between your elements.

.selection_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;  
}

.select_island {
  display: block;
}

<div class="selection_menu">
    <select name="Island" id="select_island" class="select_island">
        <option value="1">Island</option>
        <option value="2">West Java</option>
        <option value="3">Sumatra</option>
        <option value="4">Bali Pupuan</option>
    </select>
    
    

    <select name="type" id="select_type"  class="select_type">
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="select_process" class="select_process">
        <option value="1">Process Method</option>
        <option value="2">Natural</option>
        <option value="3">Honey</option>
        <option value="4">Dry Hulled</option>
        <option value="5">Wet Hulled</option>
        <option value="6">Extended Natural</option>
        <option value="7">Full Wash</option>
    </select>

    <select name="select_quality" id="select_quality" class="select_quality">
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="select_available" class="select_available">
        <option value="1">Availability</option>
        <option value="2">Available now</option>
        <option value="3">Not yet available</option>
    </select>
    

   <select name="select_cp" id="select_cp" class="select_cp">
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>

Solution 2:^[2]

if your tag selection-menu is a flex container

you can play with justify-contentproperty with value space-betweenor space-evenly

.selection_menu {
  width:100%;
  border:solid 1px black;
  display:flex;
  justify-content:space-between;
}

<div class="selection_menu">
    <select name="Island" id="select_island" class="select_island">
        <option value="1">Island</option>
        <option value="2">West Java</option>
        <option value="3">Sumatra</option>
        <option value="4">Bali Pupuan</option>
    </select>
    
    

    <select name="type" id="select_type"  class="select_type">
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="select_process" class="select_process">
        <option value="1">Process Method</option>
        <option value="2">Natural</option>
        <option value="3">Honey</option>
        <option value="4">Dry Hulled</option>
        <option value="5">Wet Hulled</option>
        <option value="6">Extended Natural</option>
        <option value="7">Full Wash</option>
    </select>

    <select name="select_quality" id="select_quality" class="select_quality">
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="select_available" class="select_available">
        <option value="1">Availability</option>
        <option value="2">Available now</option>
        <option value="3">Not yet available</option>
    </select>
    

   <select name="select_cp" id="select_cp" class="select_cp">
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>
 </div>

Solution 3:^[3]

adding flexbox with display:flex; than justify-content:center; for horizontal align to center all the elements, than column-gap: 5rem; to create spaces between columns

.selection_menu {
  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;

  /* CHANGE HERE */
  column-gap: 5rem;
  /* CHANGE HERE */
}

<div class="selection_menu">
        <select name="Island" id="select_island" class="select_island">
            <option value="1">Island</option>
            <option value="2">West Java</option>
            <option value="3">Sumatra</option>
            <option value="4">Bali Pupuan</option>
        </select>
        <select name="type" id="select_type"  class="select_type">
            <option value="1">Type</option>
            <option value="2">Arabica</option>
            <option value="3">Robusta</option>
        </select>
    
        <select  name="process_method" id="select_process" class="select_process">
            <option value="1">Process Method</option>
            <option value="2">Natural</option>
            <option value="3">Honey</option>
            <option value="4">Dry Hulled</option>
            <option value="5">Wet Hulled</option>
            <option value="6">Extended Natural</option>
            <option value="7">Full Wash</option>
        </select>
    
        <select name="select_quality" id="select_quality" class="select_quality">
            <option value="1">Quality</option>
            <option value="2">Specialty</option>
            <option value="3">Premium</option>
    
        </select>
    
        <select name="select_available" id="select_available" class="select_available">
            <option value="1">Availability</option>
            <option value="2">Available now</option>
            <option value="3">Not yet available</option>
        </select>
        
    
       <select name="select_cp" id="select_cp" class="select_cp">
           <option value="1">Cupping score</option>
           <option value="2">80-85</option>
           <option value="3">85.1-90</option>
       </select>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	jeremy-denis
Solution 3	UPinar

'I cannot change position and add spaces between selection tags in html

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]