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

enter image description here

<div >
    <select name="Island" id="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"  >
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="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" >
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="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" >
       <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?

CodePudding user response：

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 >
    <select name="Island" id="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"  >
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="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" >
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="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" >
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>

CodePudding user response：

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 >
    <select name="Island" id="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"  >
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="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" >
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="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" >
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>
 </div>

CodePudding user response：

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 >
        <select name="Island" id="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"  >
            <option value="1">Type</option>
            <option value="2">Arabica</option>
            <option value="3">Robusta</option>
        </select>
    
        <select  name="process_method" id="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" >
            <option value="1">Quality</option>
            <option value="2">Specialty</option>
            <option value="3">Premium</option>
    
        </select>
    
        <select name="select_available" id="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" >
           <option value="1">Cupping score</option>
           <option value="2">80-85</option>
           <option value="3">85.1-90</option>
       </select>