在屏幕中心对齐一列

Question

我的应用程序中有这个。

并希望将其居中对齐。这是我的反应代码

class ImageDetail extends Component{

    renderImage(image){
        if(image!=null){
            return(
                <Card>
                    <CardImg width="100%" src={this.props.image.picture} alt={this.props.image.name} />

                    <CardBody>
                        <CardTitle>{this.props.image.name}</CardTitle>
                        <CardText>{this.props.image.description}</CardText>
                    </CardBody>
                </Card>
            )
        }else{
            return(
                <div></div>
            )
        }
    }

    renderComments(comments) {
        var commentList = comments.map(comment => {
            return (
                <li key={comment.id} >
                    {comment.comment}
                    <br /><br />
                    -- {comment.author},
                    &nbsp;
                    {new Intl.DateTimeFormat('en-US', {
                            year: 'numeric',
                            month: 'long',
                            day: '2-digit'
                        }).format(new Date(comment.date))}
                    <br /><br />
                </li>
            );
        });

        return (
            <div>
                <h4>Comments</h4>
                <ul className="list-unstyled">
                    {commentList}
                </ul>
            </div>
        );
    }

    render() {
        if (this.props.image) {
            return (
                <div className="row">
                    <div className="col-12 col-md-5 m-1">
                        {this.renderImage(this.props.image)}
                    </div>
                    <div className="col-12 col-md-5 m-1">
                        {this.renderComments(this.props.image.comments)}
                    </div>
                </div>
            );
        }
        else {
            return (
                <div></div>
            );
        }
    }
}

export default ImageDetail;

我尝试在 row 中使用 text-align 属性，但仍然没有。有什么想法吗？

谢谢，西奥.

Answer 1

正如我所看到的，您正在使用 Bootstrap 和 ReactStrap，所以我建议您将整个页面包装在 <Container /> 组件中，就像这样

return (
              <Container><div className="row">
                    <div className="col-12 col-md-5 m-1">
                        {this.renderImage(this.props.image)}
                    </div>
                    <div className="col-12 col-md-5 m-1">
                        {this.renderComments(this.props.image.comments)}
                    </div>
                </div></ Container>
            );

或者直接使用 <div className="container">。

在屏幕中心对齐一列

Aligning a column in the center of the screen

javascript

reactjs

reactstrap