Question

我似乎无法在两张图片之间水平居中...这是我目前为止的代码。

＆＃13;

<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>

＆＃13;

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

Answer 1

请使用2个CSS自定义类为警报容器及其自身尝试以下代码。我假设您的色谱柱高度为120px，具体取决于您的图像高度。

下面的代码段无法正确显示，因为视口较小。请单击右上角的“完整”页面或复制到本地并进行测试。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我似乎无法在2张图片之间水平设置警报......

这是因为图像的宽度小于列的宽度。如果您为每列绘制背景，您将看到这一点：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-2 col-md-offset-3" style="background: #9cf;">
      <img width="120" height="120" src="//placehold.it/120x120/c69/f9c/?text=1.png">
    </div>
    <div class="col-md-2" style="background: #cf9;">
      <span class="alert alert-success">
        Test
      </span>
    </div>
    <div class="col-md-2" style="background: #f9c;">
      <img width="120" height="120" src="//placehold.it/120x120/69c/9cf/?text=2.png">
    </div>
  </div>
</div>

＆＃13;

所以第一个解决方案是将text-center类添加到<div class="row">：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row text-center">
    <div class="col-md-2 col-md-offset-3">
      <img width="120" height="120" src="//placehold.it/120x120/c69/f9c/?text=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="//placehold.it/120x120/69c/9cf/?text=2.png">
    </div>
  </div>
</div>

＆＃13;

第二种解决方案是对所有三个对象使用一列：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
      <img class="pull-left" width="120" height="120" src="//placehold.it/120x120/c69/f9c/?text=1.png">
      <img class="pull-right" width="120" height="120" src="//placehold.it/120x120/69c/9cf/?text=2.png">
      <span class="alert alert-success">
        Test
      </span>
    </div>
  </div>
</div>

＆＃13;

PS。不要忘记将行包装成容器。 row类具有负边距，container类补偿了这种特殊性。

Answer 3

另一种方法是使用Bootstrap类：

text-center和center-block

Bootply ：http://www.bootply.com/9UZ6sQgjX9

<强> HTML ：

<div class="container">
  <div class="row">
    <div class="col-md-2 col-md-offset-3">
      <img class="center-block" width="120" height="120" src="//placehold.it/120x120/c69/f9c/?text=1.png">
    </div>
    <div class="col-md-2 text-center">
      <span class="alert alert-success ">
        Test
      </span>
    </div>
    <div class="col-md-2">
      <img class="center-block" width="120" height="120" src="//placehold.it/120x120/69c/9cf/?text=2.png">
    </div>
  </div>
</div>

图像之间的Bootstrap Center警报

3 个答案: