html - 图像之间的 Bootstrap 中心警报

Question

我似乎无法将警报水平居中放置在两张图片之间……这是我目前的代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-2 col-md-offset-3">
    <img width="120" height="120" src="1.png">
  </div>
  <div class="col-md-2">
    <span class="alert alert-success">
      Test
    </span>
  </div>
  <div class="col-md-2">
    <img width="120" height="120" src="2.png">
  </div>
</div>

我假设我需要一些自定义 css 但不确定是什么...

Answer 1

请尝试使用以下代码为警报容器及其本身使用 2 个 CSS 自定义类。根据您的图像高度，我假设您的列高为 120 像素。

下面的代码片段显示不正确，因为视口(viewport)较小。请点击右上角的整页或复制到本地进行测试。

.alert-middle-container {
  line-height: 120px;
}
.alert-middle {
  display: inline-block;
  line-height: normal;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-2 col-md-offset-3">
      <img width="120" height="120" src="http://lorempixel.com/120/120/">
    </div>
    <div class="col-md-2 text-center alert-middle-container">
      <span class="alert alert-success alert-middle">
                    Test
      </span>
    </div>
    <div class="col-md-2">
      <img width="120" height="120" src="http://lorempixel.com/120/120/">
    </div>
  </div>
</div>