如何使 react-select 元素居中

Question

我试图将 React-select 元素放在页面的中央。（请注意，我不是要使 text/menu 居中，而是要使 select 框居中）

内联样式对我不起作用，因此我添加了一个 div 标签并能够控制宽度，如下所示：

<div style={{width: '300px'}} >
                    <Select options={selectOptions} value={selectedOption} onChange={this.handleChange}/>
</div>

但我无法将 select 元素居中。

有什么帮助吗？

Answer 1

好吧，使用一些 CSS 属性可以轻松解决这个问题。你知道，我相信 display: flex, justify-content: 'center', align-items: center 会如你所愿。

<div style={{width: '300px', display: 'flex', justify-content: 'center', align-items: 'center'}} >
                    <Select options={selectOptions} value={selectedOption} onChange={this.handleChange}/>
</div>

如何使 react-select 元素居中

How to center react-select element

css

reactjs

react-select