垂直对齐 Header 与警报和按钮

Question

我正在尝试垂直对齐标题 header、一个警告和两个按钮。我的目标是使警报的宽度更大，即使它的内容很短。我的问题是，由于我使用 span 作为警报，我需要将 display: inline-block 置于其样式中，但这样做会导致与 header 的对齐出现偏差。顺便说一句，我正在使用 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

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/

垂直对齐 Header 与警报和按钮

Vertical Align Header with Alert and Button

html

css

frontend

twitter-bootstrap