그리드 내부의 Material-UI 절대 위치

ptkvsk

재료 UI 아이콘을 텍스트와 정렬하여 아이콘의 가장 낮은 그린 포인트가 기준선에서 정확히 시작되도록하고 싶습니다. Material-UI Grid 레이아웃을 사용하고 있습니다.

문제는 아이콘이 '기준선'에 정렬되도록 허용하면 너무 높다는 것입니다. 그렇게하면 alignSelf: 'center'너무 낮습니다. 이 시점에서 텍스트 기준선과 일치하도록 아이콘의 절대 위치를 지정하는 방법은 괜찮지 만 flexbox에서 가능한지 모르겠습니다.

  <Grid container justify="space-between" xs={6}>
    <Grid item>
      <Button variant="outlined">Cancel</Button>
    </Grid>
    <Grid item>
      <Grid container alignItems="baseline">
        <Grid item>
          <Grid container alignItems="baseline">
            <Grid item style={{ alignSelf: "center" }}>
              <Done />
            </Grid>
            <Grid item>
              <Typography>Done!</Typography>
            </Grid>
          </Grid>
        </Grid>
        <Grid item>
          <Button variant="outlined">Submit</Button>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
</div>

보시다시피 아이콘은 기준선 아래에 렌더링되고 텍스트는 올바르게 정렬됩니다. 여기에 이미지 설명 입력

elated-cerf-33mme 수정

Skoltz

relative다음과 같이 사용자 지정 위치를 추가 하여 확인 표시의 위치를 ​​수동으로 조정할 수 있습니다 .

   <Done style={{ position: "relative", top: "-1px"}} />

확인 top표시가 정렬 될 때까지 속성을 변경할 수 있습니다 . alignSelf속성 을 제거하는 경우 top: "5px"대신 사용해야 할 수 있습니다 .

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

크롬과 가장자리에서 사라지는 상대 상위`div` 내부 위치 절대`div` 위치

분류에서Dev

중첩 된 그리드 표시 문제의 Material UI React 종이 구성 요소

분류에서Dev

Material UI-React-그리드 항목을 열에 배치

분류에서Dev

Material-UI : 그리드 정렬이있는 지원되지 않는 비 단위없는 선 높이. 대신 단위없는 줄 높이 사용

분류에서Dev

Material UI의 그리드 컴포넌트 대신 CSS 그리드를 사용할 수 있습니까?

분류에서Dev

조부모에게 절대 위치하는 정적 컨테이너 내부의 CSS 클리핑 이미지

분류에서Dev

Material-UI Select에서 드롭 다운 아이콘 (화살표)의 위치를 어떻게 변경합니까?

분류에서Dev

절대 그리드 위치 : img의 텍스트

분류에서Dev

상대 위치 내부의 절대 위치?

분류에서Dev

위치 상대 목록 항목 내부의 절대 div 위치-클리핑 문제-IE7

분류에서Dev

상위 절대 Z- 색인 내부 절대 하위 위치

분류에서Dev

자바 파일의 최대 절전 모드 주석 위치

분류에서Dev

div 외부의 절대 위치 지정

분류에서Dev

절대 위치 요소 내부의 고정 위치 요소

분류에서Dev

상대 위치 내부의 절대 위치가 테두리를 벗어납니다.

분류에서Dev

Chrome의 절대 위치 입력 필드

분류에서Dev

부드러운 위치 전환이 가능한 절대 중심

분류에서Dev

ng-repeat 목록 내부의 요소를 겹치는 방법-위치 : 절대?

분류에서Dev

WPF는 Button 내부의 그리드 위치 수정

분류에서Dev

요소의 절대 위치에 대한 쿼리

분류에서Dev

절대 div 아래의 뷰 내부 위치 div

분류에서Dev

CSS로 절대 위치 div를 내리는 방법

분류에서Dev

열 내부의 절대 위치

분류에서Dev

절대 위치 내부의 위치 요소

분류에서Dev

위치 상대 div 내 절대?

분류에서Dev

사파리의 절대 위치에 대한 대안?

분류에서Dev

IFC의 절대 벽 위치

분류에서Dev

그리드 내부의 WPF Border 열 범위로 인해 UI가 고정되는 이유는 무엇입니까?

분류에서Dev

CSS 그리드의 절대 위치 요소 중앙에 배치

Related 관련 기사

  1. 1

    크롬과 가장자리에서 사라지는 상대 상위`div` 내부 위치 절대`div` 위치

  2. 2

    중첩 된 그리드 표시 문제의 Material UI React 종이 구성 요소

  3. 3

    Material UI-React-그리드 항목을 열에 배치

  4. 4

    Material-UI : 그리드 정렬이있는 지원되지 않는 비 단위없는 선 높이. 대신 단위없는 줄 높이 사용

  5. 5

    Material UI의 그리드 컴포넌트 대신 CSS 그리드를 사용할 수 있습니까?

  6. 6

    조부모에게 절대 위치하는 정적 컨테이너 내부의 CSS 클리핑 이미지

  7. 7

    Material-UI Select에서 드롭 다운 아이콘 (화살표)의 위치를 어떻게 변경합니까?

  8. 8

    절대 그리드 위치 : img의 텍스트

  9. 9

    상대 위치 내부의 절대 위치?

  10. 10

    위치 상대 목록 항목 내부의 절대 div 위치-클리핑 문제-IE7

  11. 11

    상위 절대 Z- 색인 내부 절대 하위 위치

  12. 12

    자바 파일의 최대 절전 모드 주석 위치

  13. 13

    div 외부의 절대 위치 지정

  14. 14

    절대 위치 요소 내부의 고정 위치 요소

  15. 15

    상대 위치 내부의 절대 위치가 테두리를 벗어납니다.

  16. 16

    Chrome의 절대 위치 입력 필드

  17. 17

    부드러운 위치 전환이 가능한 절대 중심

  18. 18

    ng-repeat 목록 내부의 요소를 겹치는 방법-위치 : 절대?

  19. 19

    WPF는 Button 내부의 그리드 위치 수정

  20. 20

    요소의 절대 위치에 대한 쿼리

  21. 21

    절대 div 아래의 뷰 내부 위치 div

  22. 22

    CSS로 절대 위치 div를 내리는 방법

  23. 23

    열 내부의 절대 위치

  24. 24

    절대 위치 내부의 위치 요소

  25. 25

    위치 상대 div 내 절대?

  26. 26

    사파리의 절대 위치에 대한 대안?

  27. 27

    IFC의 절대 벽 위치

  28. 28

    그리드 내부의 WPF Border 열 범위로 인해 UI가 고정되는 이유는 무엇입니까?

  29. 29

    CSS 그리드의 절대 위치 요소 중앙에 배치

뜨겁다태그

보관