CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Miha Šušteršič
Miha Šušteršič

Reputation: 10052

Aligning glyphicons with images in same div

I have a bunch of images in a row that I want to align with bootstrap glyphicons in the same row. So far, the glyphicons are much higher than the images, and I can't figure out why. The only margin I changed was left-right. The elements are nested inside a row. I am using reset.css, animate.css and bootstrap.

I can't figure out, how to make the glyphicons align with the images. Edit: they are nested inside divs to add angular classes and functions. Any help appreciated.

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 link if you wanna fiddle :). Thanks for the help.

Upvotes: 1

Views: 617

Answers (3)

Jinu Kurian
Jinu Kurian

Reputation: 9416

Its really simple 

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

Add this in your style.

EDIT: As @Druzion said, the icons are vertical-aligned to the top of containing div by defualt. we need to give vertical-align: middle inorder to place them vertically center.

You can give 

.glyphicon{ vertical-align: middle}

Both do the same trick

Here is the updated CODEPEN

Upvotes: 2

Mark Fortez
Mark Fortez

Reputation: 1

add this to your images carousel class: margin-bottom: 4em;

Upvotes: 0

Kaspar Lee
Kaspar Lee

Reputation: 5596

All the images are vertical-align: middle, however the icons do not have this rule, so they are vertical-align to the top of the containing div.

Add vertical-align: middle to your divs containing the icons to line them all up

CODEPEN

Upvotes: 1

Related Questions