如何将一个物体放在另一个物体旁边，并水平居中和右对齐它？

Question

发生了什么

我想要发生什么

我希望icon-x-circle在水平居中，在同一行为“重命名”但是要右对齐（可能30px远离右端header）。如果有人能告诉我怎么做，我们将不胜感激！

需要注意的事项：

icon-x-circle本身不居中。出于某种原因，Fontastic图标似乎在底部增加了额外的空间。所以这也是我在努力横向居中icon-x-circle的另一个原因。

我的代码

HTML 的

<div id="popup-rename" class="overlay">
        <div class="popup">
            <header>
                <h1>Rename</h1>
                <a class="close icon-x-circle" href="#"></a>
            </header>
            <div class="content">
                <div class="student-name student-rect">
                    <h1>Student Name</h1>
                </div>
                <div class="save-button center-children">
                    <a class="save icon-check-circle" href="#"></a>
                </div>
            </div>
        </div>
    </div>

CSS

header{
    background-color: #F5F5F5;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
}

header h1 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 300; /*100, 200*/
}

.icon-x-circle{
    color: #E1E1E1;
}

.overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  background: white;
  width: 50%;
  position: relative;
  transition: all 200ms ease-in-out;
}

.popup header{
    padding: 20px;
}

.close, .save{
    transition: all 200ms;
}

.icon-x-circle:hover {
  color: #B6B6B6;
}

JSFiddle

Answer 1

对齐元素的一种方法是使用position：absolute;：

.icon-x-circle {
        position: absolute;
        right: 0px;
        width: 300px;
        border: 3px solid #73AD21;
        padding: 10px;
    }

Answer 2

您可以使用绝对定位并将按钮放在任何位置。

首先，将标题设为相对容器

header{
   position: relative;
}

然后你可以使按钮绝对

header a{
    position: absolute;
    right: 30px;
    top: 10px
}

您可以随意使用right和top移动按钮。

https://jsfiddle.net/49abesy2/1/