Vertically center text beside an image - does not work. Pls help

1

Hi community,
I am currently working on my tribute page, see current status and code here:

I would like to center the text left of the image vertically based on the image height. I already tested different ways due to recommendations I found in the web. But the specialty in my case is: As I want the image to move under the text if screen falls below specified dimensions (responsive design where image does not become too small due to 2-column-layout), I cannot put the image itself in a table.

Instead I tried to set the height of the div that comprises my paragraphs of text to that of the div with class=“row” which should have - by logic - exactly the height of the image and then use a CSS table to center vertically within that div / table-cell.

Can you help?

Huge thanks in advance
Mirko

2

hey Mirko,

how about css flexbox approach?

  1. remove #parent and #child
  2. add .hey class to .row element (class name up to you)
  3. add media query + css
@media (min-width: 768px) {
  .hey {
    display: flex;
    align-items: center;
  }
}

<div class="row hey">
    <div class="col-md-8" id="">
      <!-- text -->
    </div>
    <div class="col-md-4">
      <!-- image -->
    </div>
  </div>

ref:
bootstrap3.3 media queries
flexbox

1 Like
3

Thanks so much. This solution works as expected.