Question 60892 in Html Question posted in
Some basic documentation can be found here.

<img> brings chaos into CSS-table – Html

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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    To the text positions into middle, I think you can use the code below:

    a,img {
  vertical-align: middle;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search