koowalsky koowalsky - 1 year ago 122
CSS Question

centered header with button in the same line

i want to create a CENTERED header with button on right.

i already have something like this:

text-align : center;
margin-right : 32px;

position: absolute;
top: 32px;
right: 32px;

<div><h1>test</h1><button style="float: right;">test</button></div>
<div style="text-align: center;">text</div>

but in this case header isnt centered to full width page.

also, if header is too long it should not cover button..

thank you for reading

Answer Source

If flexbox is an option, you can center the h1 and position the button to the right:

div {
  display: flex;
  justify-content: center;
  position: relative;
h1 {
  text-align: center;
button {
  position: absolute;
  right: 0;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download