Aligning a column in the center of the screen

Question

I have this in my app.

and want to align it in the center. Here is my react code

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;

I tried to use that text-align attribute in row but still nothing. Any ideas?

Thanks, Theo.

Answer 1

As i can see you are using Bootstrap with ReactStrap, so i would suggest you to wrap whole page in <Container /> component like this

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>
            );

or just use <div className="container"> instead.