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

【问题标题】：Vertical Align Header with Alert and Button垂直对齐标题与警报和按钮
【发布时间】：2017-02-19 12:24:08
【问题描述】：

我正在尝试垂直对齐标题、警报和两个按钮。我的目标是让警报的宽度更大，即使它的内容很短。我的问题是，由于我使用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： JSFiddle of my current code

【问题讨论】：

标签： html css twitter-bootstrap frontend

【解决方案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/

【讨论】：