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

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

What is the best way to display an image and text side by side within a single row in react-table?

I am trying to display an image and text side by side within a single column in a React table. I have successfully added two texts together in a single column using the code below: Header: "Name", id: "User", accessor: (d) => ...

javascripthtmlreactjsnext.jsreact-table

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

I am dealing with a dynamic list that contains around 50 elements, but the exact number may vary. <div style="width:465px;"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa& ...

jquerycssinternet-explorer-7

using mathematical calculations to determine opacity levels in a set of rules

I'm attempting to multiply opacity values. I have experimented with the following: calc(@opacity * 100) @opacity-ruleset { filter:alpha(opacity= (@opacity * 100)); -moz-opacity:@opacity; opacity: @opacity; -webkit-opacity: @opacity; } Is there a wa ...

cssless

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...

javascripthtmlvue.js

What is the best way to target the first child element in this scenario?

Is there a way to target only the p tag with id="this" using .root p:first-child selector? Here is the code snippet: Link to CodePen .root p:first-child { background-color: green; } p { margin: 0; } .container { display ...

htmlcss

A combination of Webpack CSS modules with Angular templates

I am currently trying to integrate webpack CSS modules into my angular/ionic project. I'm wondering if it's possible for the CSS module class definitions to be correctly appended to an external template instead of an inline template. When I embe ...

cssangularjswebpack

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

javascriptphphtmlcss

When hovering, the <a> element does not fully encompass the background color

I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area. body { margin: 0; font-family: Aria ...

css

What is the best way to generate this arc using CSS3?

What is the most effective method for creating this unique shape using CSS3? The square image should be clearly defined. We greatly appreciate any insight you can offer. EDIT: I have put in a lot of effort, but standard CSS methods are not getting me t ...

htmlcss

How to position items at specific coordinates in a dropdown using JavaScript

I have five images in my code and I would like to arrange them in a circular pattern when they are dropped into the designated area. For example, instead of lining up the five images in a straight line, I want them to form a circle shape once dropped. Ho ...

javascripthtmlcss

What could be causing the issue with saving form data to local storage in React?

I am facing an issue with the code I have written to store data in local storage. Sometimes it works fine, but other times it saves empty data or erases the previous data when the Chrome window is closed and reopened. Any idea what could be causing this in ...

javascripthtmlreactjs

Learn how to transform a raw readme file into an HTML formatted document using AngularJS, after retrieving it from GitHub

Can someone help me figure out how to format each line of the README.MD raw file into an HTML document using the controller below? angular.module('ExampleApp', []) .controller('ExampleController', function($scope, Slim,$sce) { ...

javascripthtmlangularjsgithub-apireadme

What is preventing the items inside the <ul> element from displaying?

Struggling to grasp pagination, I can't figure out why the contents of "li" under the "ul" disappear while the "ul" container continues to display despite specifying in the JavaScript that only 6 should be visible on the page. The "ul" and "li" elemen ...

javascriptphpjqueryhtmlcss

What is the best way to conceal a set of columns and reveal them upon clicking a header column?

Currently working with Bootstrap 3 and successfully split the top into two columns. I am aiming to replicate the design shown in the sample image without relying on JavaScript or jQuery. Upon clicking "Quick Info", there should be a new set of columns reve ...

htmlcsstwitter-bootstrap

AngularJS: Validators in Controller do not directly bind with HTML elements

The in-line validations on the HTML side are functioning properly, but when I utilize functions in my Controller (specifically ingresarNuevoEmpleador and limpiarNuevoEmpleador), the $invalid value is always true. Additionally, $setPristine does not seem to ...

javascripthtmlangularjsvalidation

Making a secure connection using AJAX and PHP to insert a new row into the database

Explaining this process might be a bit tricky, and I'm not sure if you all will be able to assist me, but I'll give it my best shot. Here's the sequence of steps I want the user to follow: User clicks on an image (either 'cowboys&apos ...

phpjavascripthtmlajaxfunction

Scrollbar width does not expand when hovered over

I am having trouble increasing the width of the scrollbar when hovering over it. However, I keep receiving an error in the console stating that 'scrollbar.addEventListener' is not a function. JAVASCRIPT setTimeout(function() { const scrollbar ...

javascripthtmlcss

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

javascripthtmlasp.netangulartypescript

Necessary form group in html [Angular]

Is there a way to make certain form fieldsets required while allowing the user to choose which inputs to fill? My idea: Users can select what they want to fill out without having to complete all of the fieldset inputs. I have these two options: 1: < ...

angularjshtmlforms