Align several images vertically inside a container

Question

Align several images vertically inside a container

I'm currently attempting to vertical align/center some images within a div, but it's not coming out perfectly. The images seem to be slightly too low to be considered vertically centered. What could be causing this issue?

.Container
{   
    width:280px;
    position:fixed;
    border:1px solid blue;
    left:0px;
    text-align: center;
    line-height:84px;
}

.Container input[type=image]
{
   vertical-align:middle;
}

UPDATE:

http://jsfiddle.net/2j531q32/

update 2: The images are not valid int the js fiddle There you see the gap between the image and the top border.

css vertical-alignment

Answer 1

Answer №1

The solution that was originally suggested did not work for me while using IE11.

Fortunately, I came across a helpful webpage that outlined a Method for Vertical Centering.

After implementing the method described in the webpage, I was able to successfully center elements in both Chrome and IE11. It was crucial to ensure that the line-height was set to be greater than the tallest element to be centered.

#Parent{
    line-height: 200px; // > the highest element to be centered.
}

.parent img {
    vertical-align: middle;
}

To see a demonstration of the solution in action, you can visit this Jsfiddle demonstration.

Answer 2

The solution that was originally suggested did not work for me while using IE11.

Fortunately, I came across a helpful webpage that outlined a Method for Vertical Centering.

After implementing the method described in the webpage, I was able to successfully center elements in both Chrome and IE11. It was crucial to ensure that the line-height was set to be greater than the tallest element to be centered.

#Parent{
    line-height: 200px; // > the highest element to be centered.
}

.parent img {
    vertical-align: middle;
}

To see a demonstration of the solution in action, you can visit this Jsfiddle demonstration.

Answer 3

Answer №2

Forget about using line height CSS. Achieve vertical alignment of divs by utilizing the display:table and display:table-cell properties. The exaggerated height of .ButtonBarDiv demonstrates perfect vertical centering.

One image per line: http://jsfiddle.net/eY7Ms/16/

Images on the same line: http://jsfiddle.net/eY7Ms/14/

Answer 4

Forget about using line height CSS. Achieve vertical alignment of divs by utilizing the display:table and display:table-cell properties. The exaggerated height of .ButtonBarDiv demonstrates perfect vertical centering.

One image per line: http://jsfiddle.net/eY7Ms/16/

Images on the same line: http://jsfiddle.net/eY7Ms/14/

Answer 5

Answer №3

While conducting some research, I stumbled upon a related query on stackoverflow: Why does an image inside a div have extra space below it?

It appears that browsers add extra space above/below a line by default, so adjusting the line-height may help. Here's an example:

http://jsfiddle.net/eY7Ms/13/

If you wish to modify the vertical extra space, you can try something like this:

.boxWithVerticalCenteredContent {
    height: 4em;
    line-height: 3.6em;
}

Although not perfectly centered or flexible in height, you can use position: absolute with top, bottom, left, right to center it absolutely.

Answer 6

While conducting some research, I stumbled upon a related query on stackoverflow: Why does an image inside a div have extra space below it?

It appears that browsers add extra space above/below a line by default, so adjusting the line-height may help. Here's an example:

http://jsfiddle.net/eY7Ms/13/

If you wish to modify the vertical extra space, you can try something like this:

.boxWithVerticalCenteredContent {
    height: 4em;
    line-height: 3.6em;
}

Although not perfectly centered or flexible in height, you can use position: absolute with top, bottom, left, right to center it absolutely.

Answer 7

Answer №4

This code snippet is designed to function properly in contemporary browsers:

.itemToPosition{
position: relative;
top: 50%;
transform : translateY(-50%);
}

Answer 8

This code snippet is designed to function properly in contemporary browsers:

.itemToPosition{
position: relative;
top: 50%;
transform : translateY(-50%);
}

Align several images vertically inside a container

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

What is the best way to eliminate the final border in a row that has been applied using the <

Is there a way for me to perfectly align the image and the h1 header on the webpage?

Secure Social Security Number (SSN) Input Field showing only the final four digits | includes option to show/hide

Switch between different classes with JavaScript

JavaScript Refresh Function Malfunctioning

How can I ensure that the Hamburger menu fully covers the entire viewport when it is open?

Issue with allowing the second floating div to occupy the remaining horizontal space inside the container div

ToggleButton4 Framework is a user-friendly tool for creating interactive

What is the reason that CSS selectors cannot use numbers as IDs?

I am finding it difficult to navigate relative paths when using Master Pages

When the width of the screen is less than 992 pixels, my div will be hidden

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Interactivity Battle: Clickable Div, Button, or href?

Can you explain the variance between using @media (max-width: 1000px) and @media and screen (max-width: 1000px) in CSS?

To style a text box next to text within a paragraph in CSS, simply create an empty box

Distinct styling for the start and subsequent lines of an anchor element using ::before pseudo-element

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

Leveraging the power of Material-UI and React, modify the appearance of the "carrot" icon within the

Using jQuery, wrap two specific HTML elements together