CSS перевести позицию в центр экрана? - PullRequest
Новая
       9

CSS перевести позицию в центр экрана?

0 голосов
/ 28 декабря 2018

У меня есть следующее css (определено в реакции material-ui с методом Style): 

const styles = (theme: Theme) => {
    return ({
        display: {
            transition: theme.transitions.create('transform')
        },
        displayHighlight: {
            transform: 'translateX(50%)',
            position: 'fixed',
            top: 0,
            zIndex: 10,
            transition: theme.transitions.create('transform')
        }
    }) as any;
}

CSS применяется к картам, которые отображаются в кладке в виртуализированной реакции, это то, что картаФункция рендеринга делает: 

return <div className={this.state.expanded ? this.props.classes.displayHighlight : this.props.classes.display}>
    <Card style={{ width: this.props.columnWidth }}>
        <PreviewRenderer columnWidth={this.props.columnWidth}
            embedVideo={this.props.submission.embedVideo}
            imagePreview={this.props.submission.preview} />
        <CardHeader
            style={{ textAlign: 'left' }}
            title={this.props.submission.title}
        />

        <CardContent>
            <div style={{ width: '40px', float: 'right' }}>
                {this.props.submission.id && <RatingBar submissionId={this.props.submission.id.toString()} />}
            </div>

            <Button onClick={() => this.setState({ expanded: !this.state.expanded })}>Expand</Button>
        </CardContent>
    </Card>
</div>

Когда кто-то нажимает «развернуть», я бы хотел увеличить масштаб карты и переместить ее в центр окна браузера.

Это вообщевозможно в CSS или путем передачи размеров экрана в определенный CSS, чтобы заставить его двигаться, где я хочу?

1 Ответ

0 голосов
/ 28 декабря 2018

Да, можно центрировать элемент на странице с помощью CSS (на странице, которая отличается от всего окна браузера).

Я не в Reactjs, но вы можетепопробуйте изменить свой код следующим образом: 

const styles = (theme: Theme) => {
    return ({
        display: {
            transition: theme.transitions.create('transform')
        },
        displayHighlight: {
            transform: 'translate(-50%,-50%)',
            position: 'fixed',
            top: 50%,
            left: 50%,
            zIndex: 10,
            transition: theme.transitions.create('transform')
        }
    }) as any;
}

Вы можете центрировать элемент на странице со следующими свойствами CSS: 

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

То, что это делает, центрирует верхний левый уголваш контейнер в центре экрана, а затем используйте transform: translate(-50%,-50%), чтобы переместить центр элемента туда, где раньше находился его верхний левый угол: в центре страницы.

Трудная часть будетдобиться плавного перехода от начального position: relative к position: fixed.

...