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