Right align the content in a column inside a row

Question

I am using Ant Design to create a row contains two columns, I want the content in a column to be right aligned.

My code:

        <Row gutter={[0, 8]}>
            <Col span={15}>
                {currentProject.tags &&
                        currentProject.tags.map((tag, index) => (
                            <Tag key={index}>
                                {tag}
                            </Tag>
                        ))}
            </Col>
            <Col span={9}></Col>
        </Row>

I want the content inside the column with span={15} to be right aligned. I tried style={{justifySelf: 'right'}} , style={{justifyContent: 'right'}}, style={{justifyItems: 'right'}} they are all failed.

Does any one how to use the right CSS to align the content right?

gikall · Accepted Answer · 2021-02-04T18:32:05.973

3

Please add display: 'flex', justifyContent: 'flex-end' to your Col:

 <Row gutter={[0, 8]}>
        <Col span={15} style={{display: 'flex', justifyContent: 'flex-end'}}>
            {currentProject.tags &&
                    currentProject.tags.map((tag, index) => (
                        <Tag key={index}>
                            {tag}
                        </Tag>
                    ))}
        </Col>
        <Col span={9}></Col>
    </Row>

You can check it here

edited Feb 04 '21 at 18:32

answered Feb 04 '21 at 18:08

gikall

559
5
16

I tried, but it doesn't work. Is there a way to only right-align the content in Col with span={15}? – JavaScript Rookie Feb 04 '21 at 18:26
1

I edit the answer, please check it :) – gikall Feb 04 '21 at 18:32
1

It works, thank you!! – JavaScript Rookie Feb 04 '21 at 18:38
Please accept the answer as the best. Thank you – gikall Feb 04 '21 at 18:41
May I ask one more question why when I add ```justify="end"``` on Row and all the content inside the columns doesn't align right? – JavaScript Rookie Feb 04 '21 at 18:55
I believe that this happens because the 2 columns you have (15&9) occupy the entire space of row. Make a try with two `` – gikall Feb 04 '21 at 19:51

Right align the content in a column inside a row

1 Answers1