text-align end is not placing my button to the right-CodePudding

I am trying to create a window bar in my dialog page where there is a color back ground, a text on the left side and an button on the right side which will allow user to click on it to close the dialog window. For some reason i cant get the button to display on the right. I tried the text-align right or end but for some reason it does not work. Not sure what i am missing here

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  text-align: end;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div >
  <h3 >Menu Item Edit</h3>
  <button type="button" >X</button>
</div>

I also included codepen which has the example

https://codepen.io/NoSoup4You2/pen/ZEavYeY

CodePudding user response：

Try Using

`  display: flex;
  justify-content: space-between;`

inside your .ds-primary- class. Please Apply the Code below and you're good to go. HTML:

`<div >
  <h3 >Menu Item Edit</h3>
  <button type="button" >X</button>
</div>`

CSS:

  .ds-primary-bg {
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  text-align: end;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

Here is the codePen link

CodePudding user response：

align item can be done with many ways in CSS

using flexbox
make button display block and set margin-left

1st option using flexbox

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
  
}
.text-white {
  color: white;
}
.flex-button{
  display:flex;
  justify-content: flex-end;

}
.xbutton {
  background-color: #09f;
  border: 0ch;

}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div >
  <h3 >Menu Item Edit</h3>
  <div >
  <button type="button" >X</button>
    </div>

</div>

2nd option make the button display as block and send right side

Displays an element as a block element (like button). It starts on a new line and takes up the whole width

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  display: block;
  margin-left: auto;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div >
  <h3 >Menu Item Edit</h3>
  <button type="button" >X</button>
</div>

CodePudding user response：

As a button inline element, it occupies its content width. If you wrap the button with container(div) then it occupies full width then you can move that button to the right side.

Updated code:

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
 
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

.button-container{
  text-align:right;
}

<div >
  <h3 >Menu Item Edit</h3>
  <div >
  <button type="button" >X</button>
  </div>
</div>

CodePudding user response：

You can also try using this method. Changes to html, simply move button before the text.

<div >
    <button type="button" >X</button>
    <h3 >Menu Item Edit</h3>
</div>

and changes to css

.xbutton {
   position: absolute;
   background-color: #09f;
   border: 0ch;
   padding-top: 2%;
   text-align: end;
 }

CodePudding user response：

You can change position button everywhere that you want base parent.

* {
  margin: 0;
  box-sizing: border-box;
}
body {
  padding: 0;
}
.ds-primary-bg {
  position: relative;
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #09f;
  border: 0;
}

.tooltext {
  color: white;
  padding-left: 25px;
}

    <div >
      <h3 >Menu Item Edit</h3>
      <button type="button" >X</button>
    </div>

CodePudding user response：

It's Not an a text that's why it is not working as you are trying to align it.

.ds-primary-bg {
  margin-top: 0;
  background: #09f;
  padding: 8px;
  height: 50px;
  margin-bottom: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
.text-white {
  color: white;
}
.xbutton {
  background-color: #09f;
  border: 0ch;
  display: block;
  margin-left: auto;
}

.tooltext {
  color: white;
  padding-left: 25px;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

<div >
  <h3 >Menu Item Edit</h3>
  <button type="button" >X</button>
</div>