This question has already been answered:

The conditions of the problem . The block with the text should be to the right of the photo and be aligned to the center of the vertical. However, its height is unknown (depending on the content).

Reported as a duplicate member of PashaPash ♦ 15 Feb '17 at 18:05 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • What have you tried? - neoascetic
  • @neoascetic, well, judging by the feed a lot :) For example, use display: table-cell . - ivkremer

3 answers 3

Perhaps something like this: Example

 #outer{width:100%; height:100%;} #outer div{ border: 1px solid black; display: inline-block; vertical-align:middle; position:relative; height:100%; width:200px; } #img { width:210px!important; }

With the width, or rather its size, I think that you can experiment yourself.

  • Thanks, it works - frexin

In such a markup, as far as I understand, no way. Try to make a table in the left cell display a photo in the right text. Attempting to align text vertically should be successful.

  • one
    Thanks for the answer, but I would like to do without tables. - frexin

Using JS , but since you have nothing written about the restrictions, then so.

  • Better after window.load . And instead of height you can have a margin-top: (высота изображения - высота текста)/2 . And if less is used on the client side (I doubt, of course), then it is even easier - neoascetic
  • As for onload, I agree, but this is just a sketch to show. For the rest, I think the main thing is the idea itself is clear. PS replaced the picture, because it was loading slowly) - ivkremer