Hi i’m using the following method to try and centre elements but its not working
wondering why? thanks i want to centre everything in the container
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;
}