Индикатор обновления Materiall-UI по центру выровнять по горизонтали

Стек: Meteor + React + Material-UI

Вот мой полный код моих «основных» компонентов рендеринга:

// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS

render() {
    return ( 
      <div className = "container">
        <AppBar title = "test" />
        <Tabs /> // Tab contents goes here
        <RefreshIndicator
          left={70} // Required properties
          top={0}  // Required properties
          status="loading"
          style={{ 
              display: 'inline-block',
              position: 'relative',
              margin: '0 auto' }} />
      </div>
      );
    },

Я хочу, чтобы индикатор обновления был выровнен по центру по горизонтали под myTabs, как этот кружащийся круг на этом рисунке:

введите описание изображения здесь

В документе Material-UI здесь этот индикатор имеет следующие стили :

display: 'inline-block',
position: 'relative',

С помощью этих стилей я не могу выровнять его по центру по горизонтали, а без этих стилей я даже не могу разместить его там, где я хотел.

Что я пробовал:

  1. маржа: 0 авто -> не удалось
  2. выравнивание текста: центр -> не удалось
  3. дисплей: гибкий -> не удалось
  4. комбинация 1 и 2 -> не удалось
  5. left = {$ (window) .width / 2-20} -> Это работает, но я хотел бы использовать только CSS

reactjs material-ui css
person Junho Kim    schedule 08.03.2016    source источник
comment
Не могли бы вы создать jsfiddle или jsbin, чтобы показать проблему? Можете попробовать удалить position: 'relative' и проверить?   -  person Aditya Singh    schedule 08.03.2016
comment
Я бы предложил обернуть компонент Refresh Indicator в div, который был классифицирован с помощью flex. Затем отцентрируйте его с помощью justify-content:center.   -  person lux    schedule 08.03.2016
comment
@Adiya Singh Извините, но кажется, что нет способа создать отдельный пример UI-материала на jsfiddle / jsbin ... На этот раз у Material-UI есть только установка NPM.   -  person Junho Kim    schedule 09.03.2016
comment
@lux Мне понравилось <div sytle={{ display: 'flex', justifyContent: 'center' }}><RefreshIndicator left={70} top={0} status="loading" style={{ display: 'inline-block', position: 'relative', margin: '0 auto' }}/> </div>, но не удалось.   -  person Junho Kim    schedule 09.03.2016
comment
Достаточно обидно, что flex не работает с этим индикатором из коробки.   -  person Oliver Dixon    schedule 20.12.2017

Ответы (3)


arrow_upward
13
arrow_downward

Вот как я сделал, чтобы он был выровнен по горизонтали. У меня отлично работает.

  1. Установите стиль родительского компонента на position: 'relative'.
  2. Установите стиль индикатора обновления на marginLeft: '50%' и left={-20} (при условии, что размер равен 40).

вот код (я поместил его в компонент CardText).

    ...
    <CardText style={{position: 'relative'}}>
      <RefreshIndicator
        size={40}
        left={-20}
        top={10}
        status={'loading'}
        style={{marginLeft: '50%'}}
      />
    </CardText>
    ...
person realbug    schedule 12.03.2016
comment
Это не центрирует индикатор выполнения полностью, индикатор выполнения смещается от центра с этим решением. - person Kevin Crain; 29.08.2018
comment
Вместо того, чтобы полагаться на left: -20 и знать, потому что его ширина составляет 40 пикселей, вы можете использовать transform: translateX(-50%), и он будет отзывчивым. - person keif; 05.07.2019

arrow_upward
22
arrow_downward

Приведенное ниже решение центрирует индикатор прогресса без каких-либо хакерских вычислений, вызывающих смещение элемента:

<div style={{display: 'flex', justifyContent: 'center'}}>
   <RefreshIndicator status="loading" />
</div>
person Kevin Crain    schedule 29.08.2018
comment
Я бы сказал, что это предпочтительный метод отображения по сравнению с position: absolute - TMU может быть более серьезной проблемой производительности с большим количеством position: absolute/relative элементов на странице, но этот метод будет центрировать его независимо от контейнера по сравнению с принятым ответ, который требовал, чтобы вы знали ширину. - person keif; 05.07.2019

arrow_upward
0
arrow_downward

циклический процесс в пользовательском интерфейсе материала и текстовой середине страницы stackoverflow

 <div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
                                <CircularProgress />
                                <span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
                            </div>[![enter image description here][1]][1]
person Soma sundara    schedule 25.03.2021