Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths?

Check out this jsfiddle for reference. The goal is to have the image centered between the label and input field.

Thank you!

Sample HTML Code

<img src="http://lorempixum.com/20/20/abstract" alt="">            
<div>
    <label>1234</label>
    <input type"text">
</div>
<img src="http://lorempixum.com/20/20/abstract" alt="">

CSS Styles

img, div {
    float: left;
}

label {
    display: block;
}

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

Steps for Creating an Animation Tool based on the Prototype:

One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...

BS grid malfunctioning in a non-uniform manner

When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advan ...

jQuery is used to make an object fade out once another object has been moved into place

As I delve into the world of jQuery, I've decided to create a simple Super Mario imitation. The concept is to control Mario using arrow keys and fade out mushrooms once Mario reaches them. However, my attempts at achieving this result have not been su ...

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

I am facing a challenge in trying to vertically center a FontAwesome icon within an Image Overlay Card. Despite attempting various methods like using d-flex and justify-content-center, none of them seem to be effective. What could I be overlooking? < ...

Why does the scrollbar appear even when the inner element is smaller in CSS transformation?

Please check out this link .wrapper { width: 200px; height: 200px; padding: 10px; border: 1px solid #888; overflow: auto; } .scale { width: 400px; height: 300px; background-color: red; transform: scale(0.4); transform-origin: 0 0; transitio ...

What is the best way to eliminate excessive margin-bottom on a floating image?

Is it possible to maintain the same margin at the right and bottom of an image when using <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p>? ...

I need to print out a table, but when I preview the print, I want to rotate the entire page for better visibility

Is there a way to rotate the print review using CSS and HTML? I am facing issues as the CSS styles do not seem to apply properly on it. Can someone help me solve this problem? ...

Is it recommended to employ @media print for a webpage dedicated exclusively to printing purposes?

Imagine a scenario where I have a specific page featuring a print button. Clicking on this button redirects me to a separate page with the same content, optimized for printing purposes. Instead of using @media print directly on the original page due to n ...

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

How do you determine the dimensions of a background image?

My div is a perfect square, measuring 200 pixels by 200 pixels. The background image I've chosen to use is larger at 500 pixels by 500 pixels. I'm searching for a method to ensure that the entire background image fits neatly within the confines ...

What causes the odd gaps at the bottom of boxes in a Pure CSS Masonry layout?

Issue with implementing Pure CSS Masonry layout. Using position: relative for the boxes and position: absolute for the content inside each box is causing gaps below each box. Struggling to find a solution, view the code on this codepen: http://codepen.io/k ...

What are some creative ways to customize the background of a full component?

Is there a way to modify the background color of an entire component? I want the color to cover the full width and height of the component. I attempted using the body tag, but it was ineffective. Do I need to enclose all components in a div and then appl ...

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

Exploring the distinction between absolute elements nested within other absolute elements and relative elements nested within absolute elements

My latest CSS experiment involved creating a flag of a country. Check out my code: div.flag { width: 900px; height: 600px; background-color: red; position: relative; } div.flag > div { position: absolut ...

Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely! However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my con ...

Navigate divs with varying z-index values

I want to change the z-index of 3 divs by toggling them using jQuery, but I'm not sure how to do it. What I want is to click a button that relates to a specific div and increase the z-index of that div so the content inside it is shown. Currently, all ...

Increased/Decreased impact

Can someone explain how the "Tell me more" effect is achieved on the website linked below? I'm familiar with the read more/less effect in jQuery, but what intrigues me is that the page cannot be scrolled unless the button is clicked. Here is the link ...

access pictures from a different directory using JavaScript

I am working with an images array that contains three jpg files. I am trying to set the background image of a class called pic using images from the array. The issue I'm facing is that the images are stored in an images folder with the URL images/. I ...

Using CSS files in the web directory in CakePHP and connecting them to HTML

Could someone offer some help with cakephp? I'm experiencing an issue related to routes that I can't seem to resolve. I've organized all my css files in webroot/css within my app. In my default layout, I included a html link <link href=" ...