CODEWITHSUNDEEP
htmlcss
Question3r
Question3r

Reputation: 3742

Button Icon centered horizontally but not vertically

I create a button using this code:

<div>
  <button class="btn nodeContainerBtn">
    <img class="btnIcon" src="Icons/icon-delete.png" />
  </button>
</div>

.btn {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  background-color: #E45043;
  transition: 0.2s;
}

.btnIcon{
  cursor: pointer;
}

.nodeContainerBtn {
    margin-left: 5px;
}

So my Icon is centered horizontally but not vertically. How can I fix this?

enter image description here

Upvotes: 0

Views: 45

Answers (2)

Dij
Dij

Reputation: 9808

giving some padding to .btn and vertical-align to .btnIcon seems to do it.

.btn {
  cursor: pointer;
  border: none;
  border-radius: 2px;
  background-color: #E45043;
  transition: 0.2s;
  padding: 4px;
}

.btnIcon{
  cursor: pointer;
  vertical-align:middle;
}

.nodeContainerBtn {
margin-left: 5px;
}
<div>
  <button class="btn nodeContainerBtn">
<img class="btnIcon" src="Icons/icon-delete.png" />
  </button>
</div>

Upvotes: 0

Vipul Singh
Vipul Singh

Reputation: 646

You can use flexbox to vertically align it.

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Upvotes: 1

Related Questions