5

i'm using bootstrap 3 and i want to add a link with a icon on top of a image and vertically center it.

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="col-post">
  <div class="post-img"> <a href="#" class="my-icon"></a> <a href="mylink">
    <div class="overlay"> <img src="myimage.jpg" alt="#" class="img-responsive"> </div>
    </a> 
    </div>
  <!--post-img-->
  <div class="post-icons"></div>
</div>
</div>

i want the link with the class my-icon to be on center of the image. my icon is positioned absolute and post-img is positioned relative.

Any help would be much appreciated.

Jordyn
  • 1,133
  • 2
  • 13
  • 28

3 Answers3

0

I just used the existing .center-block helper class from the library as well as .text-center class to center the contents of each div. (see documentation for bootstrap 3.x)

I am not sure this is exactly what you want but it should help you get closer to your results.

Let me know if it needs tweaking.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-xs-12">
    <h2>My approach (simplistic)</h2>
    <a href="#" class="my-icon">
      <img src="http://lorempixel.com/300/300" class="center-block img-responsive img-circle" alt="Responsive image" />
    </a>
  </div>
</div>
<hr/>
<div class="row">
  <div class="col-xs-12">
    <h2>Your approach (w/ added elements)</h2>
    <div class="col-post">
      <div class="post-img center-block text-center">
        <a href="#" class="my-icon">my-icon</a> 
        <a href="mylink">
          <div class="overlay">
            <img src="http://lorempixel.com/300/300?asdf" alt="#" class="img-responsive center-block">
          </div>
        </a>
      </div>
      <!--post-img-->
      <div class="post-icons center-block text-center">post icons</div>
    </div>
  </div>
</div>
blurfus
  • 13,485
  • 8
  • 55
  • 61
0

Try Flexbox, it's one of the few ways I've ever had success consistently center aligning items vertically.

For the parent container: display

display This defines a flex container; inline or block depending on the given value. >It enables a flex context for all its direct children. 

CSS.container { display: flex; /* or inline-flex */ }

For the child: align-items

align-items This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

CSS.container { align-items: flex-start | flex-end | center | baseline | stretch;}
Capo
  • 216
  • 3
  • 10
-1

Here is some code that has helped me vertically center images. It's usually a lot more tricky than horizontally centering.

#ID {
    Margin:0 auto;
    Position:absolute;
    Left:0;
    Right:0;
    Top:50%;
    Transform: translate(0, -50%);
    Display:block;
}
user6334426
  • 1