Javascript 如何将组件与中心/右侧对齐

How to align a component to the center/right

提问by vedant

I want to align my button to the right of the parent.

我想将我的按钮与父项的右侧对齐。

I was wondering if there is a properway to do it in material-ui. I could use a <Grid container justify="flex-end">but then I would have to use another <Grid item />. Seems too much of work.

我想知道是否有适当的方法可以在material-ui. 我可以使用 a<Grid container justify="flex-end">但随后我将不得不使用另一个<Grid item />. 似乎工作太多了。

Or maybe I am just better off using plain old CSS, messing around with float: rightand dealing with the apparent zero height of the element.

或者，也许我最好使用普通的旧 CSS，乱七八糟地float: right处理元素的明显零高度。

回答by ThomasP1988

Try this

尝试这个

<Grid container alignItems="flex-start" justify="flex-end" direction="row">
     <Button variant="contained">Add account</Button>
</Grid>

回答by Ricovitch

If you do not want to use the Grid component, you have to rely on CSS.

如果不想使用 Grid 组件，则必须依赖 CSS。

But if you use Material-UI you should use JSS (CSS-IN-JS) and not plain CSS.

但是如果你使用 Material-UI，你应该使用 JSS (CSS-IN-JS) 而不是普通的 CSS。

• Introduction : https://material-ui.com/customization/css-in-js/
• Benefits : http://cssinjs.org/benefits

• 简介：https: //material-ui.com/customization/css-in-js/
• 好处：http: //cssinjs.org/benefits

In CSS you may use any of these solutions for example. "text-align" being the simplest one.

例如，在 CSS 中，您可以使用任何这些解决方案。“文本对齐”是最简单的。

• text-align: right
• float: right
• flexbox
  • parent with : display: flex
  • child with : align-content: flex-end

• text-align: right
• float: right
• 弹性盒
  • 父母： display: flex
  • 孩子： align-content: flex-end

回答by eskawl

Material UI's Grid Component has helper props to achieve this.

Material UI 的 Grid Component 有辅助道具来实现这一点。

<Grid align-items-xs-center justify-xs-flex-end>
 <Button>Click me</Button>
</Grid>

You can find the docs here.

您可以在此处找到文档。