How to vertically align an image within a div that has a variable height

Is there a way to center an image vertically within a div that is 1/5 of the screen's height? I have managed to horizontally center the image, but vertical alignment seems tricky. Here's the code I've tried so far:

http://jsfiddle.net/ws91188y/1/

img{
width:25px;
}
.container-fluid > div{
text-align:center;
height: calc(100vh/5);
}
.container-fluid > div:nth-child(odd){
background:yellow;
}
<div class="container-fluid">
<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
<div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
</div>

htmlcssvertical-alignmentviewport-units

Answer №1

To create a visually appealing layout, you can set the parents divs with relative positioning and the images with absolute positioning:

img {
    width:25px;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
}
.container-fluid > div {
    text-align:center;
    height: calc(100vh/5);
    position:relative;
}
.container-fluid > div:nth-child(odd) {
    background:yellow;
}
<div class="container-fluid">
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">
    </div>
</div>

Answer №2

To align images vertically inside a div with responsive height, you can set the same value for line-height and use vertical-align: middle. Here's an example:

Check out this example.

img{
  width:25px;
  vertical-align: middle;
}

.container-fluid > div {
  text-align:center;
  height: calc(100vh/5);
  line-height: calc(100vh/5);
}

.container-fluid > div:nth-child(odd){
  background:yellow;
}
<div class="container-fluid">
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
  <div><img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg"></div>
</div>

Answer №3

Check out the demonstration here

To achieve the desired effect, make sure to include position:relative in the container.

.container-fluid > div {
    text-align:center;
    height: calc(100vh/5);
    position: relative;
}

Next, apply the following styling to your image:

img {
    width:25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

best way to display an array in HTML

When I input a manufacturer, I want to display the complete data from each object inside the array in the HTML. However, when I call the function on the HTML page, all I get back is the word object repeated as many times as the Manufacturer is defined in ...

javascriptarrayshtmlobject

Is it possible to continuously refresh a DIV element?

After spending the past 4 or 5 hours scouring Stack and various other resources, I am still unable to find a solution to my problem. The issue at hand involves an Iframe within a page that displays 5 lines of information fetched from a database. This info ...

javascriptphpjqueryhtmlpage-refresh

Display a loading image as a placeholder while the Block is loading on the Viewport

Despite my extensive search for a solution to my problem, I have been unable to find one that addresses it directly. I am trying to display a "loading" image for 4 seconds before the content of the div is loaded. Unfortunately, I haven't been able to ...

javascriptjqueryhtmlviewport

Tips for properly aligning blockquote opening and closing quotation marks

We are currently implementing custom styles for beginning and end quotes in a string using the <blockquote> tag. However, we are having issues with the alignment, as the opening quote appears before the text and the closing quote is at the end of the ...

htmlcsssassblockquote

Retrieve the initial identification number from a sorted list using Jquery UI Sortable

Situation: My task involves developing a mobile website that allows users to organize a list of names using the Jquery UI sortable option. Depending on the order in which the names are arranged, additional information will be displayed on the next page. ...

jqueryhtmljquery-ui

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

javascriptjqueryhtml

Center a form using Bootstrap

Struggling to center my form using bootstrap as a beginner. I've tried different methods without success. Hoping for some guidance on how to center it while keeping the same size. Any assistance would be appreciated! This is the HTML code: <div ...

htmlcsstwitter-bootstrap

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

cssnext.jstailwind-cssshadcnui

Backstretch malfunctioning

Looking to enhance my webpage with a backstretch image slideshow effect using the body background, but encountering issues. The code I have included before the </head> tag is: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery ...

javascriptjqueryhtml

Converting JSP email text into HTML format with Spring's formatting features

Currently, I am working on implementing an email service using Spring. Users have the ability to input the email subject and body in a form and send the email successfully. However, there is an issue where line breaks and tabs entered by the user are not b ...

javajqueryhtmlspringspring-mvc

Accessing a Dropdown List through PHP in an HTML Document

I am currently working on a PHP file that is responsible for parsing a JSON list and then feeding it to a combobox: <?php $jsonData = '{"marco":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25484457464a6551405651 ...

phphtmljsoncombobox

The outcome of jQuery's division and multiplication is not correct

When a user inputs data into the form fields, the other fields should be automatically filled with the calculated values. However, it appears that jQuery is treating the input values as strings instead of numbers, leading to incorrect calculations. I&apos ...

htmljquery

There seems to be a glitch in the JavaScript to-do list as it is failing to append new

My attempt at creating a to-do list is not working when I try to add a new entry. Any suggestions? Also, I plan to implement a feature that can calculate the percentage of tasks completed by crossing them off the list. <html> <head> <titl ...

javascripthtmlcss

Adjust the color of the glyphicon icon within a date and time picker dropdown component

I decided to implement the bootstrap datetimepicker using this gem and utilized the following HTML code: <div id="custom-dates" style=" clear:both;"> <div class="container"> <div class="row"> <div class='col-md-3 col-xs-3' ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected. Check ...

csstwitter-bootstrapnavbar

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

javascripthtmlcss

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...

javascriptcssvue.jsdialogprimevue

The downloading functionality of anchor tags is not functioning properly on mobile devices

In the process of developing a mobile app using Ionic Framework, AngularJs, and Html, I encountered an issue. There is a specific page where users are supposed to click on a <div> element to download a wallpaper image. Strangely enough, this works ...

androidhtmlangularjsionic-framework

Is it possible to log out a user in JavaScript by simply removing cookies?

Hey there, I currently have a node.js server running in the background which handles user login processes (I didn't create the backend code). app.use(function (req, res, next) { var nodeSSPI = require('node-sspi'); var nodeSSPIObj = n ...

javascripthtmlnode.jscookies

What is the process for creating a three-dimensional Bezier curve using JavaScript, specifically with three.js and WebGL?

I have a good grasp on creating a simple bezier curve, but I am curious about how to transform the curve into 3D. Additionally, I am wondering if it is possible to plot multiple curves to form an image like a cone. Any advice or guidance on this matter wou ...

javascripthtmlthree.js