I am creating a simple UI for a webapp using React and Ant Design. I would like to place a Button at the top right of the screen. My component render function looks something like this:

return (
    <div style={{something here?}}>
        <div style={{something else here?}}>
            <Button>Logout</Button>
        </div>
        <div>
           {Main components here}
        </div>
    </div>
);

I have tried adding various things to the outer and/or inner dics and have not been able to move the button to the right - it always stays on the left. How do I make it move to the right?

I am creating a simple UI for a webapp using React and Ant Design. I would like to place a Button at the top right of the screen. My component render function looks something like this:

return (
    <div style={{something here?}}>
        <div style={{something else here?}}>
            <Button>Logout</Button>
        </div>
        <div>
           {Main components here}
        </div>
    </div>
);

I have tried adding various things to the outer and/or inner dics and have not been able to move the button to the right - it always stays on the left. How do I make it move to the right?

• javascript
• css
• reactjs

• Use the float property of style and set it to right: <div style="float:right"/> – plum 0 Commented Jul 11, 2019 at 17:45
• direction, float, flex, position pick one.. – Mosh Feu Commented Jul 11, 2019 at 17:47
• Possible duplicate of Positioning a div to the right of its containing div – Mosh Feu Commented Jul 11, 2019 at 17:50

6 Answers 6

return (
    <div style={{}}>
        <div style={{float: 'right'}}>
            <Button>Logout</Button>
        </div>
       <div style={{clear: 'both'}}></div>
        <div>
           {Main components here}
        </div>
    </div>
);

Try that, also, this is not a React question, it should be tagged CSS

You can simply use flex-box

#button{
  display: flex;
  justify-content: flex-end;
}

<div>
  <div id='button'>
    <button> some button</button>
  </div>
  <div>
    <p> Main conent section </p>
  </div>
</div>

You can set buttons display to inline-block or inline. This will make the button to behave like normal text. After the above step set the buttons immediate divs text-align property to right. Hope this helps.

<div style="text-align:right"> <button style="display:inline-block">click me</button> </div>

Just try like this.

<div style={{ display: "flex", justifyContent: 'flex-end'}}>

      <Button onClick={() => this.logout()}>
        Logout
      </Button>

</div>

Or

<div style={{ display: "flex" }}>
    <Button style={{ marginLeft: "auto" }}  onClick={() => this.logout()}>
      Logout
    </Button>
</div>

You can easly create a class in your style file as follows :

 .flex_end   {
    @include styleclass('flex justify-content-end');
    }

then add it in your button definition like this :

 <div className='col-12 p-0 pb-1 flex_end'>
    <Button                            
    icon='pi pi-arrow-up-left'
    className='p-button-sm '
    onClick={() => onSelectPrinter()}
    type='button'
    />
</div>

Hope this helps.

This is very simple and useful. You need to use just-content and set its value to 'flex-end'.

return (
    <div>
        <div style={{display: 'flex', justify-content: 'flex-end'}}>
            <Button>Logout</Button>
        </div>
        <div>
           {Main components here}
        </div>
    </div>
);