CODEWITHSUNDEEP
htmlcssflexbox
user13585926
user13585926

Reputation:

Why is item being vertically centered when I add a display flex to it?

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?

Upvotes: 3

Views: 102

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371251

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:

Upvotes: 2

Related Questions