I am making a web GUI, and I want to add a close button, but here's the problem: it is being centered.

here's a portion of CSS:

.modmenu-container { 
  text-align: center;
}

.close-btn {
  top:0;
  right:0;
  float:right;
}

CodePudding user response：

First, the properties: top, right, bottom, and left can only be used when a position is not static. Static is the default position for every element, however, you can change it with the position property. This can sometimes mess things up, so to fix that, we can set the parent's (.modmenu-container) position to relative. Then we can set the button's position to absolute and position it to the top right.

.modmenu-container {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.125); /* For demonstration */
  padding: 1em; /* Demonstration */
  width: 40vw; /* Demonstration */
  height: 40vh; /* Demonstration */
  text-align: center;
 }
.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  /* Demonstration */
  cursor: pointer;
  background: red;
  color: white;
  outline: none;
  border: none;
 }

<div >
 <button >
   &times;
  </button>
 Content here
 </div>

CodePudding user response：

1- set parent position to relative

2- set button position to absolute

3- use top, right, left and bottom to position the button.

.modmenu-container { 
    text-align: center;
    height: 150px;
    width: 300px;
    border: 1px solid red;
    position: relative;
  }
  
  .close-btn {
    position: absolute;
    top:0;
    right:0;
    
  }

<div >Hello there
  <button >X</button>
 </div>