CSS - How to use “vertical-align : middle” with a table near an image?


Tags: css

Problem :

I would like to align an image with a table on the same line. I have tried to use the vertical-align : middle CSS Property but it doesn't work right. the table is not centered with the middle of the image.

<div align="center">
    <img src="timing-overview.png" width="800px"/>
    <table border style="display: inline-block; vertical-align: middle;">...</table>
</div>

I have tried to replace inline-block display property by inline-table or table without any success.

The solution I found is to set a vertical-align: top and add these 2 properties : position: relative and top: Xpx.

But I need to adjust the pixel number from top which is depending of the image and table size.

<div align="center">
    <img src="timing-overview.png" width="800px"/>
    <table border style="display: inline-block; vertical-align: top; position: relative; top: 50px;">...</table>
</div>

In my case, the image height is greater than the table height.

Is someone have a idea ?

Regards



Solution :

You shouldn't use display property for table because it already has property display: table. Wrap your table in a div instead and add style display: inline-block to that div.

.table-wrap {
 display: inline-block;
 vertical-align: middle;
}

img {
vertical-align: middle;
}

td {
  padding: 10px;
  border: solid 1px black;
}
 <img src="https://s-media-cache-ak0.pinimg.com/236x/38/21/61/3821618a4005b0b4aaaa741a53f496e9.jpg" width="200px"/>
    
    <div class="table-wrap">
    <table>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
     </table>
    </div>


    CSS Howto..

    How to align element based on the other element that is above

    How to set image as a button in HTML & CSS?

    how to size the silverlight object to available space

    HTML/CSS: How to make web page stay put when resizing browser window?

    How to scroll right and left by mouse scroll button

    How to manage length of dashes

    How do I add CSS styles to an ASP.NET UserControl from the code-behind?

    How to override PrimeFaces CSS via external stylesheet

    How to override the css using the JQuery

    Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

    How to set alternate row color for a given attached diagram

    How to set
  • Backgound color?
  • How to feature detect for CSS custom properties? [duplicate]

    How to remove the border line around the element in html and css?

    How to close popup

    HTML/CSS: How to move my navigation bar to the middle?

    Show icon font on image center on mouse hover

    How to auto adjust wrapper height when padding is applied to inner elements

    How to auto margin-left for the message bar

    How do you position div's in html5? [closed]

    How to shield a HTML tag from CSS?

    How to changing css on bootstrap button Group

    Jquery not showing select element. No errors in console

    How to place the same image at the top and at the bottom of the same column?

    How to create shadow in JSF input field

    “show/hide” a div with javascript not jquery, and not with display:none

    Bootstrap: how to clear images in a gallery?

    How to fix flexbox position:fixed navbar JS/CSS bug

    jquery div hidden and show, z-index issue and mouseover/mouseout issue

    How to add CSS to struts2 tags