Aligning two images vertically using the display: table-cell property

I'm trying to align two images vertically using CSS' display: table-cell property, but it doesn't seem to be working even after specifying the height.

<div style='display: table;height:500px'>
    <div style=' display: table-cell;vertical-align: middle;'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/200px-Intel-logo.svg.png' />
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/500px-Intel-logo.svg.png" />
    </div>
</div>

http://jsfiddle.net/33KYS/

csslayout

Answer â„–1

Be sure to include the vertical-align property for the image as well!

img{
    vertical-align:middle;
}

See a live demonstration here

Answer â„–2

If you are working solely with images, there is no need to enclose them in a table or table-cell. You can simply use vertical-align directly on the image itself.

.image { vertical-align: middle; }

<div>
        <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Apple-logo.svg/200px-Apple-logo.svg.png' />
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Apple-logo.svg/500px-Apple-logo.svg.png" />
</div>

http://jsfiddle.net/17HJK/5/

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

The dimensions of the box remain fixed and do not change when the screen is resized

Just starting out with HTML and CSS and trying to create a responsive website. Running into an issue where the black striped box on my page is not moving up when I resize the screen. It appears to be stuck in place, causing a gap between it and the slide s ...

csshtml

Looking to effectively personalize various React MUI components?

I want to enhance the MUI component by adding more variations and new properties. Check out this screenshot of a React Example component: The Example component can be seen in the image above. I am seeking advice as I don't have much experience with ...

cssreactjsmaterial-ui

What is the best way to ensure that images appear in a square format?

Lately, I've been experimenting with the alpha version of bootstrap 4 for a project. No matter how hard I try, I can't seem to get uploaded images of different sizes to display as squares when displayed. Do you remember how Instagram used to onl ...

cssimagetwitter-bootstraptwitter-bootstrap-4

The Bootstrap 4 modal is failing to appear on the screen

My design features an image within a centered div, overlaid with a semi-opaque textbox containing an h1 element. I'm trying to implement a Bootstrap 4 modal component that pops up when the h1 is clicked. Despite following various tutorials for creatin ...

csstwitter-bootstrapresponsive-designbootstrap-4

Add characters to div using JavaScript

I am curious about which framework, if any, would be most effective for capturing keystrokes and adding them to an HTML element such as a "p" element. My goal is to allow the client to type something on the keyboard and have it immediately displayed in the ...

javascripthtmlcssappendkeystrokes

Responsive SmoothSlider

Need help fixing the responsive breadcrumbs in my slick slider. The slick-content-slider is taking a strange height and I want to ensure that every div remains on the same line. Thank you in advance! $('.slick-content-slider').slick({ slides ...

cssresponsive-designsliderslick.js

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

javascriptcssreactjs

What is the solution to preventing borders from appearing on input tags when they are autocompleted

Recently, I encountered an issue while working on a website form where the input tag was showing borders during autocompletion, despite specifying border:none. I tried various CSS pseudo classes to resolve this problem but none of them worked. Does anyon ...

htmlcss

Tips for creating a div element with a header and scrollable section

Greetings! I am currently developing a code to manage a sprinkler system interface with a modern and visually appealing design. At the moment, I have two columns on the page, each containing boxes. Unfortunately, the alignment of these boxes is not as desi ...

htmlcss

I wish to adjust the font size as well as resize the table elements simultaneously

Adjusting the height and width of the table should automatically adjust the font size as well. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Default functiona ...

javascriptjqueryhtmlcss

I am looking to switch from a hamburger menu to a cross icon when clicked

Hey there, I'm currently working on a Shopify website and trying to make the hamburger menu change to a cross when clicked. I've been experimenting with different methods, but unfortunately haven't had any success so far. I have two images â ...

javascriptjavajquerycss

Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle. The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug ...

javascripthtmlcssgoogle-chrome

Issue with border styling in Material-UI vertical ToggleButtonGroup

In my current front-end project, I have implemented the React Material UI ToggleButtonGroup. For a Multiple Selection example with vertical styling, you can refer to this code snippet: https://codesandbox.io/s/eyk66?file=/demo.js However, I encountered a ...

cssreactjsmaterial-ui

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

javascriptcssreactjs

Animated mosaic pattern menu design

Is there a way to achieve this effect with a sketch? Note: I would like to add hover animation to the borders if possible. I attempted to do it using the following code: clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%); However, the shapes created by ...

javascriptjqueryhtmlcsssvg

I am attempting to make the fade in and out effect function properly in my slideshow

I've encountered an issue where the fading effect only occurs when the page initially loads and solely on the first image. Subsequently, the fading effect does not work on any other images displayed. This is the CSS code I have implemented by adding ...

csstypescriptsveltekit

Tips for moving an input bar aside to make room for another

Is it feasible to have two input bars next to each other and keep one open until the other is clicked, then the first one closes as well? I attempted using a transition with "autofocus," but the bar ends up closing when clicked on in my site. If anyone ca ...

javascripthtmlcssinputtransition

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Craft a CSS triangle shape from scratch

Looking at the image of a blue triangle, I am curious about how to recreate it using CSS. Would using a background image be the best approach, or is there a way to achieve this with CSS transforms? I noticed the triangle is on the left side but not on the ...

csstransformtransformation

Modifying the appearance of select components in React MUI using CSS

Can someone help me modify the appearance of the react material UI select component to match this design: I have already applied the following CSS styling: const styles = { width:'250px', border:'1px solid gray', borderBot ...

cssreactjsmaterial-ui