Geek Answers Handbook

Create Image Tag Center

I am using bootstrap 3 and I want to add an icon link on top of the image and center it vertically.

<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 my-icon class to be in the center of the image. my icon is positioned as absolute, and post-img is positioned relatively.

Any help would be greatly appreciated.

+5
source share
3 answers

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

I'm not sure that this is exactly what you want, but it should help you get closer to your results.

Let me know if he needs a setting.

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

Try Flexbox , this is one of the few ways that I have ever had success by consistently centering the vertical alignment of elements.

For parent container: display

display This defines a flexible container; inline or block depending on the set value. > It allows you to use the flex context for all its direct children.

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

For baby: align-items

ALIGN items This defines the default behavior for how flex items are laid out along the transverse axis on the current line. Think of it as the content-justification version for the transverse axis (perpendicular to the main axis).

 CSS.container { align-items: flex-start | flex-end | center | baseline | stretch;}
0
source

Here is the code that helped me vertically center the images. This is usually much more complicated than horizontal centering.

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

More articles:


All Articles