html - div元素中的表格未在一行中对齐

Question

我正在开发一个反应应用程序，我必须在 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;
  }

我怎样才能解决这个问题？

标签： htmlcssreactjsrow

Answer 1

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