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;

我尝试在行中使用该 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">。

在屏幕中央对齐一列

1 个答案: