CSS Issue on React project-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

You would need to justifyContent to centen, as your flex main axis is horizontal, and you want to center the element horizontally. Justify content manage content along main Axis, Here you can give a CSS a try, and let me know whether it works

    .task {
  text-align: center;
  align-items: center;
  justify-content: center; /*This will align the content to center in horizontal direction which is main axis if flex direction is row*/
  display: flex;
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

If you can provide whole code in a codesandbox, I can help more on that

Following are good articles on Flex box An Interguide to Flex box by Josh W Comeau Css Trick article on Flex box