vertical align image next to a table

  • lejeune1968

    (@lejeune1968)


    2 years ago

    I’m using the building blocks in WP 6.1.1 and have created a table-block floating left (no extra css) and right of that table I have an image-block floating none, with extra css:

    .rdj-afb-lijst img {
    display: flex !important;
    vertical-align: middle !important;
    align-items: center !important;

    position: relative !important;
    }

    As you can see, what I’m trying to do is to get the image vertically centered next to the table, no matter the amount of rows in that table. So far, none of the above code works.
    At this point, the image is aligned at the top of the table.
    printscreen here.

    Thanks in advance.

    • This topic was modified 2 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter lejeune1968

    (@lejeune1968)

    If the link to the printscreen doesn’t work, here is another.

    mrtom414

    (@mrtom414)

    A screen shot will not really help much. You need to either post a link to the site or the source code showing how the html is structure.

    Here is the site: https://www.koningslijst.nl/

    For instance the images next to the 1st and 2nd dynasty.

    The code of the table (generated by wp table-block):

    <figure class="wp-block-table alignleft rdj-tabel rdj-tabel-koningslijst-padding has-small-font-size"><table class="has-black-color has-text-color"><tbody><tr><td><strong>Horusnaam (H) of troonnaam</strong></td><td><strong>Geboortenaam</strong></td><td><strong>Regeerperiode</strong></td><td class="has-text-align-center" data-align="center"><strong>Regeringsjaren</strong></td></tr><tr><td><a href="https://www.koningslijst.nl/narmer/">Narmer</a> (H)</td><td></td><td>3150 - </td><td class="has-text-align-center" data-align="center"></td></tr><tr><td><a href="https://www.koningslijst.nl/aha/">Aha</a> (H)</td><td>Teti</td><td></td><td class="has-text-align-center" data-align="center"></td></tr><tr><td><a href="https://www.koningslijst.nl/djer/">Djer</a> (H)</td><td>Iteti</td><td></td><td class="has-text-align-center" data-align="center">41</td></tr><tr><td><a href="https://www.koningslijst.nl/djet/">Djet</a> (H)</td><td>Ita</td><td></td><td class="has-text-align-center" data-align="center">10-15</td></tr><tr><td><a href="https://www.koningslijst.nl/den/">Den</a> (H)</td><td>Chasety</td><td></td><td class="has-text-align-center" data-align="center">32</td></tr><tr><td>?</td><td><a href="https://www.koningslijst.nl/merneith/">Merneith</a> (Q)</td><td></td><td class="has-text-align-center" data-align="center">?</td></tr><tr><td><a href="https://www.koningslijst.nl/anedj-ib/">Anedj-ib</a> (H)</td><td>Merbia</td><td></td><td class="has-text-align-center" data-align="center">10</td></tr><tr><td><a href="https://www.koningslijst.nl/semerchet/">Semerchet</a> (H)</td><td>Irinetjer</td><td></td><td class="has-text-align-center" data-align="center">9</td></tr><tr><td><a href="https://www.koningslijst.nl/qay-a/">Qay-a</a> (H)</td><td>Qebehoe</td><td></td><td class="has-text-align-center" data-align="center">33</td></tr></tbody></table></figure>

    The code of the image (generated by wp image-block):

    <figure class="wp-block-image size-full rdj-afb-lijst rdj-koningslijst-afb-schalen"><img src="https://www.koningslijst.nl/wp-content/uploads/2014/01/narmer-h150.jpg" alt="" class="wp-image-1875"/><figcaption class="wp-element-caption">Palet van Narmer,
Egyptisch Museum Ca?ro</figcaption></figure>

    Thanks in advance.

    Solved it using the building block ‘Row’.
    Then put the table in the First block in the row and the image in the second.
    It automatically centers vertically. No further css needed.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘vertical align image next to a table’ is closed to new replies.