Tips for positioning images in a Bootstrap div class to center them from the top and bottom sides

Question

Tips for positioning images in a Bootstrap div class to center them from the top and bottom sides

Having trouble centering the top padding for all aligned images inside

<div class="photos text-center">

? I've already set a background for the div, but it ends up looking like a border after centralizing the images from all sides. Check out the code at the link below:

http://codepen.io/devendrasingh/pen/dGroGM

<div class="container">
  <div class="heading text-center">
   <h1 class="heading">Amitabh Bachchan</h1>
      <h5 class="heading">Shahenshah of Bollywood</h5>
</div> 
   <div class="photos text-center">
      <img src="http://i2.wp.com/celebritykick.com/wordpress/wp-content/uploads/2015/01/Amitabh-Bachchan-Childhood-pictures-1a.jpg" class="profile-pic image-responsive">
      <img src="http://4.bp.blogspot.com/-M406xYLxmxQ/TiP6cAVINQI/AAAAAAAABI4/WR5cdWO1h0s/s1600/4.jpg" class="profile-pic image-responsive">
      <img src="http://4.bp.blogspot.com/-TPBdiYqY2N4/TiP7S-QyKEI/AAAAAAAABJc/_WWCsdLZfIM/s1600/d.jpg" class="profile-pic image-responsive">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/d0/23/e1/d023e15529ee609aec540e354b0617ef.jpg" class="profile-pic image-responsive">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Amitabh_Bachchan_December_2013.png/220px-Amitabh_Bachchan_December_2013.png" class="profile-pic image-responsive">
<p class="caption">Amitabh Bachchan photos from different ages.</p>
</div>

Note : Images should be responsive.

jquery html css twitter-bootstrap-3

Answer 1

Answer №1

It's because there is a single p tag containing images.

This particular p tag reads as follows:

<p class="caption">Amitabh Bachchan photos from various stages of life.</p>

To adjust the height, set it to 0, like this:

.caption {
    height: 0;
}

Also, add padding to the image with the following code:

.profile-pic {
    height: 200px;
    padding: 10px 0; //insert here.
}

View the working fiddle example

Answer 2

It's because there is a single p tag containing images.

This particular p tag reads as follows:

<p class="caption">Amitabh Bachchan photos from various stages of life.</p>

To adjust the height, set it to 0, like this:

.caption {
    height: 0;
}

Also, add padding to the image with the following code:

.profile-pic {
    height: 200px;
    padding: 10px 0; //insert here.
}

View the working fiddle example

Answer 3

Answer №2

Here is a method to achieve the desired outcome:

To view an example, visit: http://example.com/code-sample

Code Snippet (HTML):

<div class='wrapper'>
    <a href='#'>
    <img class='resize_fit_center'
      src='http://i.imgur.com/ABCD123.jpg' />
    </a>
</div>

CSS Styles:

.wrapper {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid blue;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Answer 4

Here is a method to achieve the desired outcome:

To view an example, visit: http://example.com/code-sample

Code Snippet (HTML):

<div class='wrapper'>
    <a href='#'>
    <img class='resize_fit_center'
      src='http://i.imgur.com/ABCD123.jpg' />
    </a>
</div>

CSS Styles:

.wrapper {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid blue;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Answer 5

Answer №3

.container{
    position: relative;
}

.box{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Answer 6

.container{
    position: relative;
}

.box{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Tips for positioning images in a Bootstrap div class to center them from the top and bottom sides

Answer №1

Answer №2

Answer №3

Similar questions

Steps to reset default behavior after using event.preventDefault()

Animating the background of a div element using jQuery

Touch interaction operates differently than mouse movement

What are the signs of a syntax error in a jQuery event like the one shown below?

What is the process for rendering the material element that has been inserted using innerHTML in TypeScript?

Checking the validity of subdomain names using JavaScript/jQuery

Disabling hover effects for mobile devices

HTML elements are positioned in alignment

What is the best way to access and retrieve URL parameters within AngularJS?

Using PHPs nth-child in media queries

Tips on serializing two arrays into JSON format and incorporating them in an AJAX request

How can you extract the text associated with the chosen value in a dropdown list implemented in JavaScript?

I am interested in incorporating a vertical scrollbar into a gridview in ASP.NET

Setting the background using parameters in ReactJS is a powerful technique for customizing

Navigate directly to a specific slide in jQuery Cycle without using a pager manually

Scrolling issue observed on Safari browser for iPad

In a React application, adjusting the main container height to 100vh results in the window.scrollY position being set to

Is capturing a screenshot through PHP with mp4-upload feasible?

Delete class at waypoints

What is the method for specifying the HTML file extension within Visual Studio?