Search code examples
htmlcsslabeldropdown

Display an element in the middle of its parent vertically

This is how the selector looks like:

enter image description here

As you can see, the text appears near the bottom of the selector, I want it to be situated in the middle vertically, horizontally it is fine like that, near the left side.

The selector element:

<div class="MuiFormControl-root searchPlatform"></div>

has:

border: 0;
margin: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;

and the text "Platform" is a label: <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined">

I've tried to add vertical-align: middle; in its style but doesn't change its position.

How can it be positioned in the middle vertically?

Solution

  • justify-content is one possible way to go:

    .searchPlatform {
 /* for demo purposes*/ 
  border: 1px solid black;
  height: 50px;
  width: 150px;
  
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 0;
  flex-direction: column;
  vertical-align: top;
  
  /* "new" code */
  display: inline-flex;
  justify-content: center;
    
}
    <div class="MuiFormControl-root searchPlatform"><label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined">Platform</label></div>