CODEWITHSUNDEEP
htmlcss
Phil15
Phil15

Reputation: 522

Why vertical-align does not work in this specific example

Why does Vertical-align not work on the element I am trying to align? But works if I align other elements around it?

I have read few articles on vertical align, which state that it was created to align tables or inline elements. Hence I set all my elements as inline-block, in the code.

When I try to vertical-align the menu links, it does relatively nothing. If I try to align 1 box to the left or right of menu links it will push down the menu.

But if I vertical-align both boxes at once, the text gets aligned.

What does this happen, how am I supposed to use vertical-align, or am I not supposed to use it anymore?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlexPractice</title>
    <link rel="stylesheet" href="practiceflex.css">
</head>
<body>        
    <nav class="container">
        <div class="logo">
            <div class="box" id="box1"> </div>    
        </div>

        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Our mission</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Leave a comment</a></li>
            </ul>
        </div>

        <div class="profilepic">
            <div class="box" id="box2"> </div>    
        </div>                        
    </nav>        
</body>
</html>

html,body{
    padding:0px;
    margin:0px;
}
.box{
  width: 48px;
    height:50px;
    background: red;
}

.menu > ul > li{        
    text-decoration: none;
    display:inline;
    margin-right:20px;
}

.container
{
    display:inline-block;
/*    vertical-align: middle;*/
}

.container * {
    display:inline-block;
/*    vertical-align: middle;*/
}    

/*
#box1{
    vertical-align: middle;
}    

#box2{
    vertical-align: middle;
}*/

https://jsfiddle.net/curiousproger/gurmL8f9/

Upvotes: 0

Views: 56

Answers (2)

webketje
webketje

Reputation: 10966

Refer to MDN docs vertical-align. One use case is indeed for table-cells, the other is, as stated on MDN:

To vertically align an inline element's box inside its containing line box (emphasis mine)

This means 2 things:

  • vertical-align will only affect elements with display: inline or display: inline-block
  • the line-height property of the parent, and of any children may greatly influence the resulting alignments of all elements involved.

With extra levels of nesting, line-height being important for text alignment and line breaks, vertical-align is best used for inline content like paragraph text, images, icons, footnote references etc. For vertically centering block-level elements (like a navigation) it is much safer to use display: flex; align-items: center; on the parent

For illustration purposes of potential problems I included some test cases below. 

[id^="case"] { border: 1px solid; height: 50px; }
code { display: inline-block; }
.box {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: red;
  vertical-align: middle;
}

#case-2, #case-3 {
  line-height: 50px;
}
#case-3 code {
  line-height: 100px;
  vertical-align: middle;
}
#case-3 .box {
  line-height: 20px;
  vertical-align: middle;
}
<h2>vertical-align tests</h2>
<div id="case-1">
  <span class="box"></span>
  <code>#case-1</code>
  <span class="box"></span>
</div>
<div id="case-2">
  <span class="box"></span>
  <code>#case-2</code>
  <span class="box"></span>
</div>
<div id="case-3" style="line-height: 0;">
  <span class="box"></span>
  <code>#case-3</code>
  <span class="box"></span>
</div>
<h2>Flexbox</h2>
<div id="case-4" style="display: flex; align-items: center;">
  <span class="box"></span>
  <code>#case-3</code>
  <span class="box"></span>
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67738

The vertical alignment default setting (i.e. if you don't define anything else) is baseline, which is the baseline of the last line of text inside an element. If there is no text, it's the bottom border instead.

In this variation of your fiddle the first box (no text) is aligned to the baseline of the text elements by its bottom border, in the other box (containing text now) the last text line is aligned to the other text elements:

https://jsfiddle.net/x3q0v5ab/

Note: I didn't change the CSS, i only put some text into the second block.

So if you use a vertical-align setting other than baseline, use the same on both blocks.

Upvotes: 0

Related Questions