3

To replicate bug:

  1. Resize your browser width so that you can see the "ALDO" logo

  2. Uncomment this 1 line of code

    .logobox {
     /* display:flex; */
 }

  3. "ALDO" logo becomes vertically centered.

  4. Why are the logo's being vertically centered when I add a display of flex? Shouldn't this only happen if I add a justify center or align center? What is causing this bug?

1 Answers1

2

The "Aldo" logo is an image file. Generally speaking, whether it's an img or svg element, images are set to display: inline by default.

Inline level elements are set, also by default, to vertical-align: baseline. This setting raises the image slightly from the baseline (the line upon which text rests). This extra space is created to accommodate "descenders", which apply to text, not to images, but display: inline doesn't make that distinction.

When you switch from display: inline to display: flex, the images are automatically set to display: flex, which renders them as block-level elements. Such elements are not set to vertical-align: baseline.

In your code, this results in the images shifting downward into the descender space.

More details here:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • | "When you switch from display: inline to display: flex, the images are automatically set to display: flex, which renders them as block-level elements." Does this mean that if I change the display: flex to display: block, it will also "center" the ALDO logo? Because when I changed the display:flex to display: block, the ALDO logo did not center. –  Feb 02 '21 at 21:49
  • You cannot change the `display` property on flex items. It's controlled by the flex container and will ignore author-defined rules. – Michael Benjamin Feb 02 '21 at 22:00