I am trying to center a heading and then on the same line have a button on the right

Question

.heading {
  text-align: center;
  display: inline;
}

.button {
  display: inline-block;
  background-color: black;
  color: white;
}

<div>
  <h1 class="heading">Heading</h1>
  <button class="button">button</button>
</div>

Answer 1

Have you tried:

div {
display: flex;
flex-flow: wrap row;
justify-content: center;
align-items: center;
width: 90vw; 
}

button { 
justify-self: flex-end;
}

** it’s possible the button needs “align-self: flex-end;” instead *** I assume this is just because it’s on stack overflow but try to give classnames that are different then the element name. If you must even btn is different-ish. **** this is off my phone so I haven’t tested the code but it should work

Answer 2

Use float:right to align button at the right position, and text-align in the parent div to make heading text at the center.

.headBar {
  background-color: #828282;
  text-align: center;
}
.heading {
  display: inline;
}
.button {
  display: inline-block;
  background-color: black;
  color: white;
  float: right;
  right: 10px;
  top: 10px;
  position: relative;
}

<div class="headBar">
  <h1 class="heading">Heading</h1>
  <button class="button">button</button>
</div>

Answer 3

You can do this by text-align: center; to div instead of .heading and float: right; to .button as follows:

div{
     text-align: center;
}
.heading { 
     display: inline;
}
.button {
     display: inline-block;
     background-color: black;
     color: white;
     float: right;
}

<div>
     <h1 class="heading">Heading</h1>
     <button class="button">button</button>
</div>

Answer 4

You must use float right to align the button in same line as that of Heading.And for aligning the button to center you must include text-align:center in the enclosing div rather than in the heading class. The below code solves your issue.

.new{
  text-align: center;
}

.heading {
  
  display: inline;
}

.button {
  display: inline-block;
  background-color: black;
  color: white;
  float:right;
} 

    <div class="new">
        <h1 class="heading">Heading</h1>
        <button class="button">button</button>
    <div>