对齐项目中心和右侧

Question

我需要将标题对齐在中间，将按钮对齐到右侧。有时会有一个或两个按钮（使用display none隐藏它们）。

Fiddle

<div>
    <h1>
        title
    </h1>
    <button>
        button 1
    </button>
    <button>
        button 2
    </button>
</div>

Answer 1

基本上，您需要使用绝对定位来取出按钮（我将它们包装在这里以简化），使标题可以居中。

.parent {
  text-align: center;
  position: relative;
  border: 1px solid green;
}
h1 {
  display: inline-block;
}
button {
  display: inline-block;
}
.wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

<div class="parent">
  <h1>
title
</h1>
  <div class="wrap">
    <button>
      button 1
    </button>
    <button>
      button 2
    </button>
  </div>
</div>