div元素中的表单没有在一行中对齐

Question

我正在开发一个react应用程序，在该应用程序中，我必须对齐div下一行中的2个链接和一个按钮，但只有链接在行中对齐，而不是表单字段。这是我的代码：

<div className='header'>

<a>Privacy policy</a>
<a>Terms and conditions</a>

<Form
state={state}
onClick={() => {
setState(true);
inputFocus.current.focus();
}}
onSubmit={onFormSubmit}
ref={node}
>
<Button type="submit" state={state}>
<FontAwesomeIcon icon={'search'} size="1x" />
</Button>
<Input
onChange={e => setInput(e.target.value)}
ref={inputFocus}
value={input}
state={state}
placeholder="Search for a movie..."
/>
</Form>
</div>

这是我的css：

.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

我该怎么解决这个问题？

Answer 1

.header {
display: flex;
justify-content: center;
align-items: center;
height:100vh;
margin: 0 auto;
}

Answer 2

.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content:center;
}