material-ui RadioGroup row 수직 정렬 ( vertical align )

문제 상황

설명

---

FormLabel에 

material-ui의 RadioGroup에서 row속성일 때,  FormLabel과 FormControlLabel을 수직 정렬하는 방법입니다.

 

해결방법

---

FormLabel에 style 속성을 다음과 같이 추가합니다.

        
text
        

            
        
     
style={{
  display: "flex",
  alignItems: "center",
}}

display와 alignItems 가 동시에 있어야만 동작합니다.

 

 

적용 전 스샷 및 코드

---

적용 전 스샷

수직 정렬 되지 않은 모습

 

적용 전 코드

        
text
        

            
        
     
<RadioGroup
  row
  aria-label="position"
  id="userTypeRadio"
  name="userType"
  defaultValue="student"
  onChange={handlingRadio}
>
  <FormLabel
    component="legend"
  >
    회원 유형&nbsp;&nbsp;
  </FormLabel>
  <FormControlLabel
    value="student"
    control={<Radio color="primary" />}
    label="학생"
    labelPlacement="end"
  />

  <FormControlLabel
    value="tutor"
    control={<Radio color="primary" />}
    label="튜터"
    labelPlacement="end"
  />

  <FormControlLabel
    value="professor"
    control={<Radio color="primary" />}
    label="교수"
    labelPlacement="end"
  />
</RadioGroup>

 

 

적용 후 코드 및 스샷

---

적용 후 스샷

수직 정렬 된 모습

적용 후 코드

        
text
        

            
        
     
<RadioGroup
  row
  aria-label="position"
  id="userTypeRadio"
  name="userType"
  defaultValue="student"
  onChange={handlingRadio}
>
  <FormLabel
    component="legend"
    style={{
        display: "flex",
        alignItems: "center",
    }}
  >
    회원 유형&nbsp;&nbsp;
  </FormLabel>
  <FormControlLabel
    value="student"
    control={<Radio color="primary" />}
    label="학생"
    labelPlacement="end"
  />

  <FormControlLabel
    value="tutor"
    control={<Radio color="primary" />}
    label="튜터"
    labelPlacement="end"
  />

  <FormControlLabel
    value="professor"
    control={<Radio color="primary" />}
    label="교수"
    labelPlacement="end"
  />
</RadioGroup>

 

 

참조

---

CSS center and vertical alignment