Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with:

<div class="main-pic">
 <ul>
     <li><img src="images/extra/laptop.jpg"></li>
     <li><img src="images/extra/laptop1.jpg"></li>
     <li><img src="images/extra/laptop2.jpg"></li>
     <li><img src="images/extra/laptop3.jpg"></li>
     <li><img src="images/extra/laptop4.jpg"></li>
     <li><img src="images/extra/laptop5.jpg"></li>
 </ul>
</div>

And here is the CSS I've been using:

.main-pic{width:430px;height:430px;border:1px solid black;margin:20px auto;display:block;float:none;overflow:hidden;}
.main-pic ul{width:10000px;}
.main-pic ul li{width:430px;height:430px;float:none;display:block;margin:-25% auto auto;position:relative;top:50%;}
.main-pic ul li img{max-width: 400px;height:auto;max-height: 400px;width: auto;}

I've tried vertical-align:middle; and display:table-cell; but haven't had any luck. Any suggestions to help me achieve the desired result would be greatly appreciated!

htmlcss

Answer №1

In order to center elements vertically within a fixed-height parent element, you can utilize the CSS property vertical-align: middle. This involves adding an extra element that is displayed as an inline-block, with zero width and full height.

Here is a sample HTML structure:

<div class="wrapper">
    <div class="centerer"></div>
    <img ...>
    <img ...>
</div>

And here is the accompanying CSS code:

.wrapper {
    height: 300px;
}
.centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}
.wrapper > img {
    vertical-align: middle;
}

You can view a demo of this technique on JS Bin.

If you are aware of the container's exact height, another approach is to set its line-height to the same value instead of using the additional div.centerer.

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

jQuery fails to modify HTML according to its intended purpose

I've been struggling to update a price using JQuery. Even though the code seems fine when I check the console, the HTML doesn't reflect the changes. Additionally, when I try to log console.log(newPrc), it gives an error saying "newPrc" is not def ...

javascriptjqueryhtml

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...

htmlangulartypescriptaccessibilityjaws-screen-reader

Setting the height of a webpage element to match the height of the window through CSS

How can I make the .Bck div stretch to the full height of the browser window? I attempted using jQuery, but the height doesn't adjust correctly when I resize the window. What is wrong with my JavaScript and can this be achieved with CSS alone? <!- ...

jqueryhtmlcss

Customizing Mat Horizontal Stepper Icons with Unique Background Colors in Angular Material

I'm having trouble customizing the colors of the icons In my mat-horizontal-stepper, I have five mat-steps (Part A, Part B ... Part E), each needing a different color based on certain business rules. While I can change the color for all steps or the ...

cssangulartypescriptangular-materialangular-material-stepper

What is the best way to vertically center a button against a video using CSS?

How can I vertically center a button against a video using CSS? Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class= ...

javascripthtmlcss

Display a div element for a specified amount of time every certain number of minutes

I am currently utilizing AngularJS, so whether the solution involves AngularJS or pure JS does not make a difference. In the case of using AngularJS, I have a parameter named isShowDiv which will determine the switching between two divs based on the follow ...

javascripthtmlangularjs

Adjust the top margin of content to account for the height of a fixed header

When dealing with a fixed header that has been removed from the HTML flow, it can be tricky to adjust the content below it. The challenge arises because the height of the header can vary based on screen size. How can we dynamically adjust the margin-top fo ...

jqueryhtmlcss

WordPress does not allow self-referencing within the same site

I am currently working on a wordpress site and I am trying to create a link that directs to a specific section on the same page. This is the code I am using: <a href="#offer" target="_self">test</a> And here is the code for the landing secti ...

htmlwordpress

styling a flex container with aligned text and buttons

I'm attempting to align text on the left and button controls on the right within a display: flex div. <CustomFieldContainer> <StyledWellContainer> <FieldDetails key={id}> <H4 bold>{label}</H4> <Styled ...

cssreactjs

Can you please provide instructions on how to expand the view in the title bar for a JavaScript/CSS/HTML UPW project?

Struggling to integrate the title bar in a UWP project using JavaScript/CSS/HTML and having trouble accessing the necessary APIs. Came across a custom helper class written in c++ in UWP samples on Github, but unable to reference it in my javascript code. H ...

javascriptcssuwp

What causes HTML/Django template to run code in a non-linear fashion?

I was puzzled by the behavior of this particular html template I learned in an online class. It seemed to be executing out of order: The python form class is called using Django's syntax {{form}} which injects blank fields for user input (name, email ...

pythonhtmldjango

Decide on the chosen option within the select tag

Is there a way to pre-select an option in a combobox and have the ability to change the selection using TypeScript? I only have two options: "yes" or "no", and I would like to determine which one is selected by default. EDIT : This combobox is for allow ...

htmlangulartypescript

Modify the contents of the 'data-content' area in the popover

Looking for a solution where I can update only a portion of the data-content within a popover. Here is an example code snippet: <div class="popover-wrapper"> <i class="glyphicon glyphicon-question-sign hover_content" ...

javascripthtmljquery

Alignment issue: Center alignment failing to work correctly

I'm currently working on a navigation bar with a central title and links to other pages aligned to the right. Despite using text-align: center, the title remains off-center. I've implemented a flexbox to ensure that the title and links are on the ...

htmlcss

Connect the CSS file in React index.html to the Flask backend

I am attempting to connect a CSS template that is serving static backend content through Flask with my React frontend. Here is the structure I am working with: client/ src/ components/ menu.jsx public/ ...

cssreactjsflask

Obtain the src attribute of iframes using Robot Framework Selenium and store it as a variable

On a webpage, I have an iframe element that displays an html document representing a generated form. My goal is to create an automated Selenium script to validate specific values within this document. Currently, I am manually copying the URL from the ifram ...

htmlseleniumxpathrobotframework

What is the best way to arrange cards in a horizontal stack for easy carousel viewing later on

My main objective is to design a unique card carousel where users can navigate through the cards by clicking on arrows placed on the left and right sides. The approach I am considering involves stacking multiple card-decks and smoothly transitioning to th ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

Using jQuery to show text upon hover using a `for` loop

I'm currently working on a webpage and incorporating a feature where hovering over specific div elements triggers the display of certain text in another div. There are 5 elements that I want to make hoverable and show text upon interaction. After imp ...

javascripthtmljquerycss

Encountering a 'Cannot Get /' Error while attempting to reach the /about pathway

I attempted to create a new route for my educational website, and it works when the route is set as '/', but when I try to link to the 'about' page, it displays an error saying 'Cannot Get /about' Here is the code from app.js ...

javascripthtmlnode.jsexpressweb-applications

Is there a way to adjust the width of the datepicker on my device?

I've been attempting to adjust the width of the date picker, but I'm having trouble achieving it. Below is my code: import React from "react"; import ReactDOM from "react-dom"; import { DatePicker, RangeDatePicker } from &qu ...

javascriptcssreactjsdatepicker