如何在Semantic UI React中实现按钮居中对齐？

Hey there! I see you've been trying to use Semantic UI React's Grid and Grid Row components to layout your Support segment but haven't had luck yet. Let's get this sorted out—your current code places the Label and Button directly inside the Segment without leveraging the Grid's layout capabilities, which is why the grid wasn't affecting your elements.

Here's a revised version of your code that properly uses Grid, Grid.Row, and Grid.Column to control the placement of your elements. I'll set up a common clean layout where the ribbon label stays in place and the "contact us" button aligns to the right, but you can tweak the columns to match your exact needs:

import { Segment, Button, Label, Grid } from 'semantic-ui-react';
import React from 'react';

const GeneralSupportSegment = () => (
  <Segment>
    {/* Wrap content in Grid to activate layout control */}
    <Grid>
      <Grid.Row verticalAlign="middle">
        {/* Column for the ribbon label */}
        <Grid.Column>
          <Label ribbon color="blue" size="large">Support</Label>
        </Grid.Column>
        {/* Column for the button, aligned to the right */}
        <Grid.Column textAlign="right">
          <Button>contact us</Button>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </Segment>
);

export default GeneralSupportSegment;

Key Changes Explained: #

• Wrapped your Label and Button inside a Grid component to enable the grid layout system.
• Used Grid.Row to group elements into a single horizontal row, with verticalAlign="middle" to keep the label and button vertically centered relative to each other.
• Split the row into two Grid.Column components: one for the Label (taking default width to fit its content) and another for the Button with textAlign="right" to push the button to the far right of the segment.

If you want a different layout—like the button sitting below the label, or taking up more space—you can adjust the width prop on the Grid.Column components (e.g., width={8}) or add additional rows as needed.

内容的提问来源于stack exchange，提问作者Arash