垂直对齐标题与警报和按钮

Question

我试图垂直对齐标题标题，提醒和两个按钮。 我的目标是即使内容很短，也要使警报的宽度更大。我的问题是，由于我使用span作为警报，我需要将display: inline-block放在其样式中，但通过这样做，与标题的对齐变得不对齐。顺便说一下，我正在使用Bootstrap。

这是我想要发生的事情的形象：

这是我的HTML：

<h1>
    <span>This will be a very long title</span>
    <span class="alert custom">
        This is notification!
    </span>
    <span class="pull-right">
        <button class="btn button-round">O</button>
        <button class="btn button-round">X</button>
    </span>
</h1>

这是我的CSS：

.button-round {
  border-radius: 50%;
  color: white;
  background: green;
}

.custom{
  font-size: 12px;
  vertical-align: middle;
  background: green;
  color: white;
}

这是我当前代码的一个方面： JSFiddle of my current code

Answer 1

为了简化这一点，你应该使用flex：

.button-round {
  border-radius: 50%;
  color: white;
  background: green;
  margin: auto
}

.custom {
  font-size: 12px;
  vertical-align: middle;
  background: green;
  color: white;
  /* added */
  flex: 1;
  margin: 0 0.25em;
}

h1 {
  display: flex;
}


/* end added */

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<h1>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <span>This will be a very long title</span>
  <span class="alert custom">
  This is notification!
</span>
  <span class="pull-right">
  <button class="btn button-round">O</button>
  <button class="btn button-round">X</button>
</span>
</h1>

https://jsfiddle.net/fczbe58L/1/