Margin auto / inline block - not centering

1

Hi i’m using the following method to try and centre elements but its not working

wondering why? thanks :slight_smile: i want to centre everything in the container

image
image1366×768 61.5 KB

  render() {
    return (
      <div className="App" className="container">
        <div className="inside-layer">
        <h1 className="app-title">MY LIST</h1>
          <div>Add an Item</div>
          <br />
          <input
            type="text"
            placeholder="type the item here"
            //once the input is entered, the object will be assigned a value = user's input
            //we also need this value later for the list also
            value={this.state.newItem}
            onChange={e => this.updateInput("newItem", e.target.value)}
          />
          <button className="add-btn" onClick={() => this.addItem()}>
            Add
          </button>
          <br />
          <ul>
            {this.state.list.map(item => {
              return (
                <li key={item.id}>
                  {item.value}
                  <button
                    className="btn"
                    onClick={() => this.deleteItem(item.id)}
                  >
                    X
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}

body {
  background: lightyellow;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
}

.btn {
  background: pink;
  margin: 20px;
}

.add-btn {
  background: lightblue;
  width: 40px;
  height: 40px;
  margin: 2em;
}
.app-title {
  text-align: center;
  color: lightblue;
  font-size: 70px;
}
.container {
  border: 5px solid pink;
  border-radius: 25px;
  padding: 2em;
  text-align: "center";
  margin: "auto";
}

.inside-layer {
  display: inline-block;
}
2

Try flexbox method described in the article

3

If you are writing the CSS in a CSS file you don’t need the apostrophes around auto or center in the container class.

should just be:

  text-align: center;
  margin: auto;

also you don’t need className twice for App and container. Just put:

<div className="App container" >
1 Like
4

The title moved to the centre but the other elements stayed towards the right?

render() {
    return (
      <div className="App container">
        <div className="inside-layer">
          <h1 className="app-title">MY LIST</h1>
          <div>Add an Item</div>
          <br />
          <input
            type="text"
            placeholder="type the item here"
            //once the input is entered, the object will be assigned a value = user's input
            //we also need this value later for the list also
            value={this.state.newItem}
            onChange={e => this.updateInput("newItem", e.target.value)}
          />
          <button className="add-btn" onClick={() => this.addItem()}>
            Add
          </button>
          <br />
          <ul>
            {this.state.list.map(item => {
              return (
                <li key={item.id}>
                  {item.value}
                  <button
                    className="btn"
                    onClick={() => this.deleteItem(item.id)}
                  >
                    X
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}

html,
body {
  background: lightyellow;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  height: 100%;
}

.btn {
  background: pink;
  margin: 20px;
}

.add-btn {
  background: lightblue;
  width: 40px;
  height: 40px;
  margin: 2em;
}
.app-title {
  text-align: center;
  color: lightblue;
  font-size: 70px;
}
.container {
  height: 100%;
  border: 5px solid pink;
  border-radius: 25px;
  padding: 2em;
  margin: "auto";
  align-items: center;
  justify-content: center;
}

.inside-layer {
}

image
image1366×768 60.6 KB

5

You still have quotes around margin: "auto";

.container {
  height: 100%;
  border: 5px solid pink;
  border-radius: 25px;
  padding: 2em;
  margin: "auto"; <-- right here
  align-items: center;
  justify-content: center;
}

change it to margin: auto;

6

it seems that the flexbox method only changed the title to the centre. But if i add text-align: center, it will move everything else to the centre also, which is what i want. any ideas why it split it up like this?

.container {
  height: 100%;
  border: 5px solid pink;
  border-radius: 25px;
  padding: 2em;
  margin: auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.inside-layer {
}

image
image1366×768 60.1 KB

7

Your align-items and justify-content is doing nothing for your container. Those are flex properties, which means your container class needs to be a flex item, which it is not. To change it to a flex item, you need to set display to flex. So something like this >

.container {
    display: flex;
    border: 5px solid pink;
    border-radius: 25px;
    padding: 2em;
    align-items: center;
    justify-content: center;
    text-align: center;
}

You don’t need margin auto if you are using flexbox, since it’s being taken care of by the align-items and justify-content properties.