CSS: Centering images vertically within a fixed-positioned container, regardless of their dimensions

I am completely stuck on this problem. CSS and DIVs are new to me, so I appreciate your patience.

My goal is to create a DIV-based image gallery with the following layout:

<div id="container">
<div class="row">
<div class="img-container">
img
</div>
...more img-containers
</div>
...more rows
</div>

I am facing challenges because the thumbnails in the gallery vary in size (but all less than 150x150px). This makes traditional vertical-align solutions ineffective, especially considering that the row divs and container are statically positioned.

I have spent hours searching through various resources without finding a solution that works for my specific case. Any assistance would be greatly appreciated!

For reference, the website I am working on can be found here.

Thank you for any help you can provide!

cssvertical-alignment

Answer №1

.img-container img {vertical-align: middle ;}
has been very effective for me in aligning images with varying heights and widths. The vertical centers are always on point...

If CSS isn't providing the solution you need, perhaps consider using a program to generate images from existing thumbnails: resize them to match the largest dimensions while adding transparent borders around the smaller ones (using a format like PNG that supports transparency).

Answer №2

To achieve the desired layout, I would utilize a combination of floating each image container to the left within the row div and implementing auto-centering for the images within the image container.

Here is a potential approach to accomplish this. It is advisable to convert any div id to a div class if it will be used multiple times within your document.

<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            background-color: #666;
            text-align: center;
        }

        #container {
            background-color: #fff;
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
            padding: 10px;
        }

        .row {
            clear: both;
            padding: 15px 0;
        }

        .img-container {
            float: left;
            width: 33%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div>
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div>
        <div class="row">
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
            <div class="img-container">
                <img src="images/image1.jpg" alt="image1" width="150" height="200" />
            </div>
        </div> 

    </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

live preview of row data in a thumbnail

I'm curious about creating dynamic thumbnails of logos from table rows, similar to the image below: https://i.sstatic.net/FooEz.png Here is the code I've been using: .numberCircle { border-radius: 50%; width: 30px; height: 30px; padd ...

phphtmlcsstwitter-bootstrapbootstrap-4

Aligning content at the center of an inline parent vertically

Attempting to design an adaptive post meta for a post card. The challenge is handling cases where the post meta contains multiple categories, requiring them to be wrapped while vertically centering the content within the li elements (such as avatars and i ...

cssinlinecenter

Navbar display issues on mobile devices in Bootstrap

When viewing the navbar on a desktop, everything looks good. However, when looking at it on a phone, it appears distorted. How can I either disable the menu for mobile devices or what is the best way to fix this issue? Here is the code for the navbar: ...

jqueryhtmlcsstwitter-bootstrapjquery-mobile

Displaying a picture solely in a designated region

I created a basic menu using an unordered list: <ul class="courses"> <a href="#"> <li class="spinny"> <h3>Course Title</h3> <img class="rotateme" src="images/logo_transparent.png"/> </li& ...

javascriptjquerycss

Hovering over a link causes malfunction in CSS drop-down menu

I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown to appear when you hover over .droptoggle. I'm including the entire page because I can't figure out what's wr ...

htmlcss

What is the method for adjusting the success button's color using SASS?

My current theme's success button is green, but I want to change it to yellow. How can I achieve this? In the _variables.scss file, the following lines are present: $btn-success-color: $btn-default-color !default; $btn-success-bg: ...

csstwitter-bootstraptwitter-bootstrap-3sassbootstrap-4

What's the best way to ensure these have equal heights?

There seems to be a difference in height between the verses at the bottom, and I want each verse next to each other to have equal heights. Here is my current code setup: .verse img { height: 1em; } <h1>PSALM 1</h1> <p> <div> ...

csstextvertical-alignment

Why is it that the vertical square bar is not appearing on my website?

I've been attempting to add a vertical bar that stays fixed to the top right corner of my screen, but for some reason, it's not showing up no matter what I try. Here is the CSS code I'm using for my site, everything seems normal except that ...

htmlcss

Increase the gap between vertically aligned columns in Bootstrap 4 by adding spacing

Managing vertical spacing between columns that switch from horizontal to vertical at breakpoints can be challenging. While there are solutions available when dealing with forms, applying them to multiple columns wrapping in a row can be tricky. I have atte ...

htmlcssbootstrap-4twitter-bootstrap-4spacing

Is it possible to eliminate the *:after effect for specific elements in my CSS?

I struggle with CSS, so I decided to use a library that includes the following CSS code: *, *:before, *:after { box-sizing: inherit ; } While this code works well for some views, it messes up others and is unnecessary for some. For instance, in this b ...

css

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

javascripthtmlcssshopifyshopify-template

How can I create an image of a number using Bootstrap?

I have a collection of web pages featuring tiles with various images For example: https://i.sstatic.net/HKna1.jpg Some of my pages look identical to these, but do not include any images https://i.sstatic.net/rLXPY.png In the second screenshot, each ti ...

htmlcssbootstrap-5

Content confined within a fixed block element designed to be flexible in length

Check out my jsfiddle link Here is the markup (css in fiddle). <div class="item"> <a href="#"> <span class="title">Short Title </span><br/> <span class="date">June 21st, 2013</span> </a ...

htmlcss

Tips for aligning a dropdown button with the other elements in your navbar

I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. https://i.sstatic.net/fSRIT.png I attempted to adjust the code for proper alignment before publishing, but was ...

javascripthtmlcssnavbar

What is the best way to maintain the original font color even after hovering over it?

Hello everyone, I'm having trouble maintaining the white color on hover. When I move the cursor to the next element inside the hover element, the font color changes. I've tried various methods to keep the desired color but nothing seems to work. ...

htmlcsscss-selectors

What is the way to display the final list item when clicking in jQuery?

I am attempting to achieve a specific behavior where clicking on a button will trigger the content below to scroll in such a way that only the last item in the list is visible. I have been using jQuery for this functionality, but unfortunately, it is not ...

javascriptjqueryhtmlcss

What is the best way to create a function that will initiate the download of a particular file based on a specific key provided by the

I need assistance in creating a function for my text box and button setup. Can someone please guide me on how to achieve this? The user will be provided with a specific alphanumeric key from the website. They must input this key into the text box and then ...

javascripthtmljquerycssdownload

Fade in/out overlay effect when clicking on a content block

I've hit a roadblock while trying to implement overlay fading in and out to cover a block created by some JavaScript code. Here is a link to the project. When you click on any of the continents, a series of blocks with country flags will appear. You& ...

javascriptjqueryhtmlcss

A confined space that is scrollable, yet keeps any overflow hidden without displaying a scroll bar

Is there a method for creating a overflowing div that conceals the overflow, does not display a scroll bar, but remains scrollable (via mouse wheel or touch input)? For example: <!DOCTYPE html> <div id="longtext" style="width:100px; height ...

htmlcssscrollscrollbaroverflow

What is the best way to ensure balance between columns in Bootstrap 4?

Hello everyone! I am currently working on ensuring that all the columns in my table have equal width, except for the update and delete columns which should remain as they are. I'm utilizing Bootstrap 4.5.2 for this task. Below is the code snippet of ...

htmlcssbootstrap-4