Question

我有一堆图像连续，我想与同一行中的bootstrap glyphicons对齐。到目前为止，glyphicons远远高于图像，我无法弄清楚为什么。我改变的唯一边距是左右。元素嵌套在一行中。我正在使用reset.css，animate.css和bootstrap。

我无法弄清楚，如何让glyphicons与图像对齐。编辑：它们嵌套在div中以添加角度类和函数。任何帮助表示赞赏。

HTML：

<div class="row carousel-thumbnails">
  <div class="col-xs-12">
    <div><span class="glyphicon glyphicon-chevron-left"></span></div>
    <img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
    <img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
    <img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
    <img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
    <div><span class="glyphicon glyphicon-chevron-right"></span></div>
  </div>
</div>

的CSS：

.webpage {
  margin-top: 2em;
}

.link-list {
  text-align: center;
}

.link-icon {
  display: inline-block;
}

.link-image {
  height: 3em;
  width: 3em;
  border-radius: 120px;
  margin: 0 1em;
}

.thumbnail {
  text-align: center;
}

.carousel-thumbnails {
    text-align: center;
}

.carousel-thumbnails img {
    width: 6em;
    height: 6em;
    margin: 0 0.5em;
}

.carousel-thumbnails div {
  display: inline-block;
}

.carousel-thumbnails div span{
  font-size: 5em;
}

.active {
    border: 0.1em solid red;
}

Codepen链接，如果你想要小提琴:)。谢谢你的帮助。

Answer 1

非常简单

.carousel-thumbnails div span{
  vertical-align: middle;
}

以您的风格添加此内容。

编辑：正如@Druzion所说，图标是vertical-align通过defualt包含div的顶部。我们需要提供vertical-align: middle以便将它们垂直居中放置。

你可以提供

.glyphicon{ vertical-align: middle}

两者都做同样的把戏

以下是更新后的CODEPEN

Answer 2

所有图片均为vertical-align: middle，但图标没有此规则，因此它们vertical-align为包含div的top。

将vertical-align: middle添加到包含图标的div，以便将它们排成一行

CODEPEN

Answer 3

将此添加到您的图片轮播类：margin-bottom: 4em;

将glyphicons与同一div中的图像对齐

3 个答案: