CSS Issue on React project

January 12, 2023

I’m starting to play with CSS and I’m struggling to center my "tasks". To debug I used a colored border and it’s centered, but the elements aren’t.

.App {
  display: block;
  text-align: center;
  align-items: center;
}

.done {
  color: red;
}

.task {
  text-align: center;
  align-items: center;
  display: flex;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Here is where the CSS is targetting:

import React, { Component } from "react";

class Task extends Component {

    render() {
        return (
            <div className={`task ${this.getClass()}`}>
                <div>{this.props.task.text}</div>

                <button className="task-element" onClick={() => this.props.onDone(this.props.task.id)}>
                    <span className="material-symbols-outlined">check_box</span>
                </button>

                <button className="task-element" onClick={() => this.props.onDelete(this.props.task.id)}>
                    <span className="material-symbols-outlined">
                        delete
                    </span>
                </button>
            </div>
        );
    }

    getClass() {
        return this.props.task.isDone ? 'done' : 'notDone';
    }
}

export default Task;

Here is the Output

Tryed to center elements and can’t.

>Solution :

You need to use the justify-content property to center the elements inside the flexbox

Try this

.task {
  align-items: center;
  justify-content: center;
  display: flex;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}