<img> brings chaos into CSS-table

Question

I have a CSS-table based toolbar. Everything was fine until it became necessary to add buttons with pictures there. For some reason, when adding an <img> tag, the height of the toolbar increases (although it is set in pixels), and buttons without images move down.

  .toolbar {
      display: table;
      height: 50px;
      background-color: #ccf;
      border-collapse: collapse;
    }
    
    .toolbar-button {
      display: table-cell;
      padding: 0 15px;
      line-height: 50px;
      border: solid 1px black;
    }
    
    .imgbutton-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .imgbutton-container > img {
      margin-right: 10px;
    }

<h2>Without &lt;img&gt;:</h2>

  <div class="toolbar">
    <a href="#" class="toolbar-button">
      <div class="imgbutton-container">
        button 1
      </div>
    </a>
    <a href="#" class="toolbar-button">
      button 2
    </a>
  </div>

<h2>With &lt;img&gt;:</h2>

  <div class="toolbar">
    <a href="#" class="toolbar-button">
      <div class="imgbutton-container">
 <img src="https://www.google.com/favicon.ico" /> 
        button 1
      </div>
    </a>
    <a href="#" class="toolbar-button">
      button 2
    </a>
  </div>

Try uncommenting the line with the <img> tag. Using the developer tools, you can see that the size of the image and even the entire container is quite sufficient to fit them inside the cell without the need to expand it, but for some reason it still expands.

Could you please explain why this happens and how to avoid this behaviour?

Answer 1

The first part is easy: the height increases because you haven't specified a height for the buttons, you specified a line-height. Change that to height and the issue will disappear.

To get the content in the middle after that, you simply need to add vertical-align: middle; to the .toolbar-button class. The nested imgbutton-container div was at the top of the table-cell container, which is why it didn't appear even.

Example of the solution implemented:

.toolbar {
  display: table;
  height: 50px;
  background-color: #ccf;
  border-collapse: collapse;
}

.toolbar-button {
  display: table-cell;
  padding: 0 15px;
  height: 50px;
  border: solid 1px black;
  vertical-align: middle;
}

.imgbutton-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgbutton-container > img {
  margin-right: 10px;
}

<div class="toolbar">
  <a href="#" class="toolbar-button">
    <div class="imgbutton-container">
      <img src="https://www.google.com/favicon.ico" />
      button 1
    </div>
  </a>
  <a href="#" class="toolbar-button">
    button 2
  </a>
</div>