Question 195869 in CSS Question posted in
Some basic documentation can be found here.

How does vertical align works in css?

This property confuses me a lot. please take a look at below snippet.

body:

 <div class="parent">
       <img src="./cat.jpeg" width="100" height="100" class="img"></img>
       <div class="child child1">X</div>
       <div class="child child2">X</div>
       <span>X</span>
    </div>

style:

<style>
        body,
        html {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

      .parent {
        outline: 1px solid red;
        margin:  100px auto;
        margin-left: 100px;
      }

      .child {
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      .child1 {
        outline: 1px solid green;
      }

      .child2 {
        outline: 1px solid orange;
      }
    </style>

If i set .img { vertical-align: text-bottom; } it will behave below, I guess the reason is the last X could be considered as the strut. The img baseline is its bottom so it matches the X descent area.
enter image description here

If i set .img { vertical-align: bottom; } it will show below, but why?
enter image description here

It looks like with different vertical align configuration, the parent line box baseline or linebox height is not static, could someone please give a detail explanation on this? thank you.

Tags:

2

Answers


  1. 0

    When the vertical-align value is bottom then it aligns the bottom of the element and its descendants with the bottom of the entire line. Since the elements are displayed as ‘inline'(span and image) or ‘inline-block'(div), the parent takes up the size of the tallest element.

    Login or Signup to reply.
  2. 0

    the parent line box baseline or linebox height is not static

    You can check the specification for the full detail but the most important part is:

    The line box height is the distance between the uppermost box top and the lowermost box bottom.

    So yes the height is not static and depends on the vertical alignment of each element. The browser will first align all the items correctly then the line box should be tall enough to contain all the of them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search