I am having difficulties with vertically centering my div, which is currently acting as a container for two text areas. The two text areas are positioned side by side as I want them, but I would like them to be vertically centered on the screen while maintaining their relative positions. How can I achieve this?
App.js
class App extends React.Component {
state = {
character: null
};
render() {
return (
<div className="Centre">
<div className="Left">
<TextBox
/>
</div>
<div className="Right">
<textarea
className="Box"
placeholder={"English translation"}
value={this.state.english}
/>
</div>
</div>
);
}
}
export default App;
App.css
.Box {
height: 100px;
width: 98%;
padding: 1%;
border: solid 1px orange;
}
.Centre {
width: 800px;
height: 400px;
margin: 0 auto;
}
.Left {
width: 300px;
height: 200px;
float: left;
border: red;
}
.Right {
width: 300px;
height: 200px;
float: Right;
border: red;
}
textbox.jsx
class TextBox extends React.Component {
render() {
return (
<form>
<textarea
className="Box"
placeholder="Type in Spanish"
value={this.props.equation}
type="text"
name="equation"
/>
</form>
);
}