Good afternoon, I began to study the layout and faced such a problem. I need to align the elements in the header vertically in the center, but the hitch is that one group of elements has the float: left property. At first I didn’t understand what the problem was, then I found one of the tutorial articles where it’s written that float doesn’t apply to vertical-align. Now I do not know what to do. The picture shows what I need to do. What do I need to do

Мой код: https://codepen.io/chegonenko/pen/dpLJQb

1 answer 1

You read right, but this does not apply to your example. In your case, the float property affects only the .l_part , .l_part , not their contents. You only need to align the insides of these blocks. And since all the internal blocks you have with inline-block properties, they can be aligned with each other.

  1. We set vertical-align: middle to all internal inline-block so that they vertical-align: middle each other in pairs. ( .picture , .l_text , .r_text , .phone )
  2. For a picture, set the display: block property so that it doesn’t add empty space under it, which will ruin the alignment (read about it separately, for example, here )
  3. Inside the .header header after the floated elements — that is, in your case, add a <div> with the clear: both property to the end to clear the wraps. (what is it and why do you need to do this separately, for example, here )