how to middle listitems of material ui?

Question

i am trying to middle the list items (checkbox, text and buttons) inside of material ui list but it is not working i have tried every possible solution but it is not working for me... if someone knows please fix this... thanks

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { todoDeleted, todoUpdated, todoCompleted } from '../Slices/TodoSlice';
import { Checkbox, List, ListItem, makeStyles } from '@material-ui/core'

const useStyles = makeStyles({
  listRoot: {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: '#fce4ec',
    borderWidth: "1px",
    borderColor: "#aaaaaa",
    borderStyle: "solid",
    borderRadius: "20px",
    height: "40px",
    marginBottom: "10px",
  }
})

export default function TodoItem({ todo, i }) {
  const classes = useStyles()
  const dispatch = useDispatch();
  const [editable, setEditable] = useState(false);
  const [text, setText] = useState(todo.text);

  const handleUpdate = () => {
    dispatch(
      todoUpdated({
        id: todo.id,
        text,
      })
    );

    if (editable) {
      setText(todo.text);
    }
    setEditable(!editable);
  };

  return (
      <div className={classes.listRoot}>
        <List>
          <ListItem>
        <Checkbox
          value={todo.id}
          onChange={(e) => dispatch(todoCompleted(+e.target.value))}
          defaultChecked={todo.done}
        />
        
        <div>
          {todo.done ? (
            <p>
              <del>{todo.text}</del>
            </p>
          ) : (
            <h4>
              {editable ? (
                <input
                  type="text"
                  placeholder={text}
                  value={text}
                  onChange={(e) => setText(e.target.value)}
                />
              ) : (
                todo.text
              )}
            </h4>
          )}
        </div>
        <button
          onClick={() => handleUpdate()}
          disabled={todo.done}
        >
          {editable ? 'Update' : 'Edit'}
        </button>
        <button
          onClick={() => {
            console.log(todo.id);
            return dispatch(todoDeleted(todo.id));
          }}
        >
          Delete
        </button>
        </ListItem>
        </List>
      </div>
  );
}

this is the code, i have tried every way but it is not working for me, i am missing something?

Answer 1

to vertically align in the middle items of a flexbox use align-items property set as center:

const useStyles = makeStyles({
  listRoot: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fce4ec',
    borderWidth: "1px",
    borderColor: "#aaaaaa",
    borderStyle: "solid",
    borderRadius: "20px",
    height: "40px",
    marginBottom: "10px",
  }
})