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

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

enter image description 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 class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <button type="button" class="xbutton text-white">X</button>
</div>

I also included codepen which has the example

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

htmlcss


Solution 1:[1]

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 class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <div class="flex-button">
  <button type="button" class="xbutton text-white">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 class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <button type="button" class="xbutton text-white">X</button>
</div>

Solution 2:[2]

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 class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <div class="button-container">
  <button type="button" class="xbutton text-white">X</button>
  </div>
</div>

Solution 3:[3]

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 class="ds-primary-bg">
  <h3 class="tooltext">Menu Item Edit</h3>
  <button type="button" class="xbutton text-white">X</button>
</div>

Solution 4:[4]

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

<div class="ds-primary-bg">
    <button type="button" class="xbutton text-white">X</button>
    <h3 class="tooltext">Menu Item Edit</h3>
</div>

and changes to css

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

Solution 5:[5]

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 class="ds-primary-bg">
      <h3 class="tooltext">Menu Item Edit</h3>
      <button type="button" class="xbutton text-white">X</button>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Takesha Kaluarachchi
Solution 2 nagendra nag
Solution 3
Solution 4 Fallen
Solution 5

Related Questions